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}		/>	);}