滑块

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

export function SliderDemo() {

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add slider
Copy

用法

🌐 Usage

Copyimport { Slider } from "@/components/ui/slider"

Copy<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

"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

查看 Base UI Slider 文档。

🌐 See the Base UI Slider documentation.