اسلایدر (Slider)

1import { Slider } from "@/components/ui/slider";
2
3export default function BasicExample() {
4  return (
5    <Slider defaultValue={[33]} max={100} step={1} />
6  );
7}
8

1import { Slider } from "@/components/ui/slider";
2import { Label } from "@/components/ui/label";
3
4export default function WithLabelExample() {
5  return (
6    <div className="space-y-4">
7      <Label>صدا</Label>
8      <Slider defaultValue={[50]} max={100} step={1} />
9    </div>
10  );
11}
12

1import { useState } from "react";
2import { Slider } from "@/components/ui/slider";
3import { Label } from "@/components/ui/label";
4import { Volume2 } from "lucide-react";
5
6export default function WithValueExample() {
7  const [volume, setVolume] = useState([50]);
8
9  return (
10    <div className="space-y-4">
11      <div className="flex items-center justify-between">
12        <Label htmlFor="volume">صدا</Label>
13        <span className="text-sm text-muted-foreground">{volume}%</span>
14      </div>
15      <div className="flex items-center gap-4">
16        <Volume2 className="h-4 w-4 text-muted-foreground" />
17        <Slider
18          id="volume"
19          value={volume}
20          onValueChange={setVolume}
21          max={100}
22          step={1}
23          className="flex-1"
24        />
25      </div>
26    </div>
27  );
28}
29

1import { useState } from "react";
2import { Slider } from "@/components/ui/slider";
3import { Label } from "@/components/ui/label";
4import { DollarSign } from "lucide-react";
5
6export default function RangeExample() {
7  const [priceRange, setPriceRange] = useState([20, 80]);
8
9  return (
10    <div className="space-y-4">
11      <div className="flex items-center justify-between">
12        <Label>محدوده قیمت</Label>
13        <span className="text-sm text-muted-foreground" dir="ltr">
14          ${priceRange[0]} - ${priceRange[1]}
15        </span>
16      </div>
17      <div className="flex items-center gap-4">
18        <DollarSign className="h-4 w-4 text-muted-foreground" />
19        <Slider
20          value={priceRange}
21          onValueChange={setPriceRange}
22          max={100}
23          step={1}
24          minStepsBetweenThumbs={1}
25          className="flex-1"
26        />
27      </div>
28      <p className="text-xs text-muted-foreground">
29        تعداد دسته‌ها به صورت خودکار بر اساس طول آرایه مقدار تعیین می‌شود. برای اسلایدر بازه‌ای، آرایه با دو مقدار استفاده کنید
30      </p>
31    </div>
32  );
33}
34

1import { Slider } from "@/components/ui/slider";
2import { Label } from "@/components/ui/label";
3
4export default function StepsExample() {
5  return (
6    <div className="space-y-8">
7      {/* Step 1 */}
8      <div className="space-y-2">
9        <Label>دقیق (Step: 1)</Label>
10        <Slider defaultValue={[50]} max={100} step={1} />
11      </div>
12
13      {/* Step 5 */}
14      <div className="space-y-2">
15        <Label>متوسط (Step: 5)</Label>
16        <Slider defaultValue={[50]} max={100} step={5} />
17      </div>
18
19      {/* Step 10 */}
20      <div className="space-y-2">
21        <Label>درشت (Step: 10)</Label>
22        <Slider defaultValue={[50]} max={100} step={10} />
23      </div>
24    </div>
25  );
26}
27

1import { Slider } from "@/components/ui/slider";
2
3export default function MinMaxExample() {
4  return (
5    <div className="space-y-8">
6      {/* 0-50 */}
7      <div className="space-y-2">
8        <div className="flex justify-between text-sm text-muted-foreground">
9          <span>0</span>
10          <span>50</span>
11        </div>
12        <Slider defaultValue={[25]} min={0} max={50} step={1} />
13      </div>
14
15      {/* 10-200 */}
16      <div className="space-y-2">
17        <div className="flex justify-between text-sm text-muted-foreground">
18          <span>10</span>
19          <span>200</span>
20        </div>
21        <Slider defaultValue={[100]} min={10} max={200} step={5} />
22      </div>
23    </div>
24  );
25}
26

1import { Slider } from "@/components/ui/slider";
2import { Label } from "@/components/ui/label";
3
4export default function DisabledExample() {
5  return (
6    <div className="space-y-2">
7      <Label className="opacity-50">غیرفعال</Label>
8      <Slider defaultValue={[60]} max={100} disabled />
9    </div>
10  );
11}
12