109k
新建

Slider 滑块

上一页下一页

一种允许用户在给定范围内选择值的输入组件。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import { Slider } from "@/components/ui/slider"

export function SliderDemo() {

安装

pnpm dlx shadcn@latest add slider

用法

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />

示例

范围选择

使用包含两个值的数组来实现范围滑块。

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

export function SliderRange() {

多个滑块手柄

使用包含多个值的数组来实现多个滑块手柄。

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

export function SliderMultiple() {

垂直

使用 orientation="vertical" 来实现垂直滑块。

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

export function SliderVertical() {

受控组件

0.3, 0.7
"use client"

import * as React from "react"

禁用

使用 disabled 属性来禁用滑块。

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

export function SliderDisabled() {

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

请参阅 Radix UI Slider 文档。