Shadcn
Slider 滑块
用于选择单值或范围值的原生输入控件。
Preview
当前值：42
import { Slider } from "@scopify/ui/shadcn/components/slider"
export function SliderDemo() {
return (
<Slider
defaultValue={[75]}
max={100}
step={1}
className="mx-auto w-full max-w-xs"
/>
)
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add sliderUsage
import { Slider } from "@scopify/ui/shadcn/components/slider"<Slider defaultValue={[33]} max={100} step={1} />Range
Use an array with two values for a range slider.
Preview
当前值：42
import { Slider } from "@scopify/ui/shadcn/components/slider"
export function SliderRange() {
return (
<Slider
defaultValue={[25, 50]}
max={100}
step={5}
className="mx-auto w-full max-w-xs"
/>
)
}
Multiple Thumbs
Use an array with multiple values for multiple thumbs.
Preview
当前值：42
import { Slider } from "@scopify/ui/shadcn/components/slider"
export function SliderMultiple() {
return (
<Slider
defaultValue={[10, 20, 70]}
max={100}
step={10}
className="mx-auto w-full max-w-xs"
/>
)
}
Vertical
Use orientation="vertical" for a vertical slider.
Preview
当前值：42
import { Slider } from "@scopify/ui/shadcn/components/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>
)
}
Controlled
Preview
当前值：42
"use client"
import * as React from "react"
import { Label } from "@scopify/ui/shadcn/components/label"
import { Slider } from "@scopify/ui/shadcn/components/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-demo-temperature">Temperature</Label>
<span className="text-sm text-muted-foreground">
{value.join(", ")}
</span>
</div>
<Slider
id="slider-demo-temperature"
value={value}
onValueChange={setValue}
min={0}
max={1}
step={0.1}
/>
</div>
)
}
Disabled
Use the disabled prop to disable the slider.
Preview
当前值：42
import { Slider } from "@scopify/ui/shadcn/components/slider"
export function SliderDisabled() {
return (
<Slider
defaultValue={[50]}
max={100}
step={1}
disabled
className="mx-auto w-full max-w-xs"
/>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
当前值：42
"use client"
import * as React from "react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { Slider } from "@/styles/radix-nova/ui-rtl/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}
/>
)
}
API Reference
See the Radix UI Slider documentation.