Slider

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

export function SliderDemo() {
	return (
		<Slider
			defaultValue={[75]}
			max={100}
			step={1}
			className="mx-auto w-full max-w-xs"
		/>
	);
}

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

export function SliderRange() {
	return (
		<Slider
			defaultValue={[25, 75]}
			max={100}
			step={5}
			className="mx-auto w-full max-w-xs"
		/>
	);
}

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

export function SliderMultiple() {
	return (
		<Slider
			defaultValue={[10, 40, 70]}
			max={100}
			step={10}
			className="mx-auto w-full max-w-xs"
		/>
	);
}

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

export function SliderVertical() {
	return (
		<div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
			<Slider
				defaultValue={[50]}
				max={100}
				step={1}
				orientation="vertical"
				className="h-40"
			/>
			<Slider
				defaultValue={[25]}
				max={100}
				step={1}
				orientation="vertical"
				className="h-40"
			/>
		</div>
	);
}

"use client";

import * as React from "react";

import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

export function SliderControlled() {
	const [value, setValue] = React.useState([0.3, 0.7]);

	return (
		<div className="mx-auto grid w-full max-w-xs gap-3">
			<div className="flex items-center justify-between gap-2">
				<Label htmlFor="slider-controlled-temperature">Temperature</Label>
				<span className="text-muted-foreground text-sm">
					{value.join(", ")}
				</span>
			</div>
			<Slider
				id="slider-controlled-temperature"
				value={value}
				onValueChange={(val) => setValue(val as number[])}
				min={0}
				max={1}
				step={0.1}
			/>
		</div>
	);
}

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

export function SliderDisabled() {
	return (
		<Slider
			defaultValue={[50]}
			max={100}
			step={1}
			disabled
			className="mx-auto w-full max-w-xs"
		/>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Slider } from "@/components/ui/slider";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {},
	},
	ar: {
		dir: "rtl",
		values: {},
	},
	he: {
		dir: "rtl",
		values: {},
	},
};

export function SliderRtl() {
	const { dir } = useTranslation(translations, "ar");

	return (
		<Slider
			defaultValue={[75]}
			max={100}
			step={1}
			className="mx-auto w-full max-w-xs"
			dir={dir}
		/>
	);
}