滑块
一个易于自定义样式的范围输入控件。
安装
pnpm dlx shadcn@latest add @lumi-ui/slider
基本用法
import { Slider } from "@/components/ui/slider"<Slider />组件结构
<Slider />功能特性
标签
使用 label 属性添加可见的标签。如果滑块没有可见标签，请通过 thumbLabels 为每个滑块手柄提供 aria-label。
{/* 可见标签 */}
<Slider label="音量" defaultValue={[50]} />
{/* 通过 thumbLabels 提供不可见标签 */}
<Slider thumbLabels={["音量"]} defaultValue={[50]} />
{/* 带标签手柄的范围滑块 */}
<Slider
label="价格范围"
thumbLabels={["最低价格", "最高价格"]}
defaultValue={[25, 75]}
/>尺寸
禁用状态
范围滑块
垂直滑块
边缘对齐的手柄
使用 thumbAlignment="edge" 让手柄保持在轨道内部。当滑块紧贴容器边缘，或位于带有 overflow: hidden 的父容器中时非常有用。
实用示例
自定义滑块
表单集成
更多信息请参阅 表单集成。