Slider

'use client';

import { Slider } from '@/components/ui/slider';

export default function SliderDemo() {
  return (
    <Slider
      label="Raio de entrega"
      showOutput
      defaultValue={5}
      minValue={1}
      maxValue={20}
      formatOptions={{ style: 'unit', unit: 'kilometer' }}
      className="max-w-sm"
    />
  );
}

'use client';

import { Slider } from '@/components/ui/slider';

export default function SliderRange() {
  return (
    <Slider
      label="Faixa de preço"
      showOutput
      defaultValue={[50, 250]}
      minValue={0}
      maxValue={500}
      step={10}
      thumbLabels={['Preço mínimo', 'Preço máximo']}
      formatOptions={{ style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }}
      className="max-w-sm"
    />
  );
}

'use client';

import { Slider } from '@/components/ui/slider';

export default function SliderFormat() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Slider
        label="Desconto à vista"
        showOutput
        defaultValue={0.15}
        minValue={0}
        maxValue={0.5}
        step={0.05}
        formatOptions={{ style: 'percent' }}
      />
      <Slider
        label="Duração da consulta"
        showOutput
        defaultValue={45}
        minValue={15}
        maxValue={120}
        step={15}
        formatOptions={{ style: 'unit', unit: 'minute' }}
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Slider } from '@/components/ui/slider';

const brl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });

export default function SliderControlled() {
  const [parcelas, setParcelas] = useState(6);
  const total = 3600;
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Slider label="Parcelas" showOutput minValue={1} maxValue={12} value={parcelas} onChange={setParcelas} />
      <p className="text-sm text-muted-foreground">
        {parcelas}x de <span className="font-medium text-foreground">{brl.format(total / parcelas)}</span> sem juros
      </p>
    </div>
  );
}

'use client';

import { Slider } from '@/components/ui/slider';

export default function SliderVertical() {
  return <Slider label="Volume" orientation="vertical" showOutput defaultValue={60} />;
}

'use client';

import { Slider } from '@/components/ui/slider';

export default function SliderDisabled() {
  return (
    <Slider label="Armazenamento" showOutput defaultValue={40} isDisabled formatOptions={{ style: 'unit', unit: 'gigabyte' }} className="max-w-sm" />
  );
}