Slider

'use client';

import { Slider } from '@akhatmirzo/ui';

export default function SliderBasic() {
  return (
    <div className="w-full max-w-sm">
      <Slider defaultValue={[40]} aria-label="Yorqinlik" />
    </div>
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { Slider } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function SliderRange() {
  const [price, setPrice] = useState([1_000_000, 3_500_000]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Slider
        value={price}
        onValueChange={setPrice}
        min={0}
        max={5_000_000}
        step={50_000}
        minStepsBetweenThumbs={2}
        formatValue={(v) => formatMoney(v)}
        aria-label="Narx"
      />
      <p className="m-0 text-sm text-text-muted">
        Narx:{' '}
        <span className="font-semibold text-text tabular-nums">
          {formatMoney(price[0]!)} — {formatMoney(price[1]!)}
        </span>
      </p>
    </div>
  );
}

'use client';

import { Slider } from '@akhatmirzo/ui';

export default function SliderShowValue() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-10 pt-8">
      <Slider defaultValue={[30]} showValue="active" aria-label="Faol paytda" />
      <Slider defaultValue={[60]} showValue="always" aria-label="Doim" />
      <Slider defaultValue={[80]} showValue="never" aria-label="Hech qachon" />
    </div>
  );
}

'use client';

import { Slider } from '@akhatmirzo/ui';

const marks = [
  { value: 0, label: '0%' },
  { value: 25, label: '25%' },
  { value: 50, label: '50%' },
  { value: 75, label: '75%' },
  { value: 100, label: '100%' },
];

export default function SliderMarks() {
  return (
    <div className="w-full max-w-sm">
      <Slider
        defaultValue={[25]}
        step={25}
        marks={marks}
        formatValue={(v) => `${v}%`}
        aria-label="Chegirma"
      />
    </div>
  );
}

'use client';

import { Slider } from '@akhatmirzo/ui';

export default function SliderSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Slider size="sm" defaultValue={[35]} aria-label="Kichik" />
      <Slider size="md" defaultValue={[65]} aria-label="O'rta" />
      <Slider defaultValue={[50]} disabled aria-label="O'chirilgan" />
    </div>
  );
}

'use client';

import { Field, Slider } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function SliderWithField() {
  const [km, setKm] = useState([45]);

  return (
    <div className="w-full max-w-sm">
      <Field
        label="Yetkazib berish radiusi"
        description="Do'kondan necha km uzoqlikkacha yetkazasiz"
        error={km[0]! > 40 ? "40 km dan uzoqqa kuryer yo'q" : undefined}
      >
        <Slider value={km} onValueChange={setKm} max={60} formatValue={(v) => `${v} km`} />
      </Field>
    </div>
  );
}

'use client';

import { Slider } from '@akhatmirzo/ui';

export default function SliderVertical() {
  return (
    <div className="flex h-48 items-stretch gap-10 pl-12">
      <Slider orientation="vertical" defaultValue={[70]} aria-label="Ovoz" />
      <Slider orientation="vertical" defaultValue={[20, 60]} aria-label="Harorat" />
    </div>
  );
}