滑块

用户在给定范围内选择值的输入控件。

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() {

Temperature0.3, 0.7

"use client"

import * as React from "react"

使用 disabled 属性禁用滑块。

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

export function SliderDisabled() {

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

"use client"

import * as React from "react"

请参阅 React Aria Slider 文档。