组件
import { Slider } from "@/components/ui/slider"
export function SliderDemo() {安装
🌐 Installation
pnpm dlx shadcn@latest add slider
用法
🌐 Usage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[33]} max={100} step={1} />示例
🌐 Examples
范围
🌐 Range
使用包含两个值的数组来创建范围滑块。
🌐 Use an array with two values for a range slider.
import { Slider } from "@/components/ui/slider"
export function SliderRange() {多拇指
🌐 Multiple Thumbs
使用含有多个值的数组来表示多个缩略图。
🌐 Use an array with multiple values for multiple thumbs.
import { Slider } from "@/components/ui/slider"
export function SliderMultiple() {垂直
🌐 Vertical
使用 orientation="vertical" 来创建垂直滑块。
🌐 Use orientation="vertical" for a vertical slider.
import { Slider } from "@/components/ui/slider"
export function SliderVertical() {受控
🌐 Controlled
0.3, 0.7
"use client"
import * as React from "react"已禁用
🌐 Disabled
使用 disabled 属性来禁用滑块。
🌐 Use the disabled prop to disable the slider.
import { Slider } from "@/components/ui/slider"
export function SliderDisabled() {从右到左
🌐 RTL
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"API参考
🌐 API Reference
请参阅 Radix UI 滑块 文档。
🌐 See the Radix UI Slider documentation.