Slider

通过拖动选择单个数值或数值区间，支持水平、垂直、步进与填充式展示，适合范围和参数调整。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于连续值或范围调整。离散选项切换用 Segmented / Select；明确 minValue、maxValue、step 和可访问名称。

bind:value 使用数值表示单滑块，数组表示双滑块范围；边界属性为 minValue / maxValue。
step 控制步长，ariaLabel 提供名称；显式 Text as="label" 替换默认标签。
solid／soft 的缺省条形标题随 LocaleProvider 切换；显式 title（含空字符串）、ariaLabel、数值及显式 label 保持原样。标题不替代可访问名称。

导入

import { Slider } from '@snowui-design-system/components';

用法

价格区间

实心样式

粗细

颜色

步骤

垂直布局

API 参考

属性	类型	默认值	示例	描述
`value`	`number \| number[]`	`0`	`value={value}`	当前值；数组表达双拖动块 Range Slider；支持 `bind:value`
`minValue`	`number`	`0`	`minValue={42}`	最小值
`maxValue`	`number`	`100`	`maxValue={42}`	最大值
`step`	`number`	`1`	`step={42}`	步进值
`orientation`	`SliderOrientation`	`"horizontal"`	`orientation={value}`	轨道方向
`variant`	`SliderVariant`	`"default"`	`variant={value}`	`solid` 为高对比条形样式；`soft` 为使用 Black token 的主题自适应低对比条形样式
`title`	`string`	`—`	`title="Example"`	`solid` / `soft` 左侧内置标题；未传时使用 slider.title，zh-CN 为“文本”、en-US 为“Text”；显式空字符串可隐藏；不是 label，也不替代 ariaLabel
`showSteps`	`boolean`	`false`	`showSteps`	使用 1px 透明缝隙按照 step 切割轨道与填充条
`showLabel`	`boolean`	`false`	`showLabel`	是否生成跟随拖动块的内置 Text label；水平条形 Range 合并为一个范围标签，其他 Range 生成两个
`thickness`	`number \| string`	`—`	`thickness="Example"`	轨道粗细；在条形变体中控制整体高度
`background`	`SnowUIColor \| string`	`"Black4"`	`background="Example"`	轨道底色
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	填充条颜色；显式传值可覆盖变体默认值
`thumbColor`	`SnowUIColor \| string`	`"StaticWhite80"`	`thumbColor="Example"`	拖动块颜色
`disabled`	`boolean`	`false`	`disabled`	禁用交互
`name`	`string`	`—`	`name="Example"`	原生表单字段名
`ariaLabel`	`string \| string[]`	`—`	`ariaLabel="Example"`	单值可访问名称；Range 可分别声明两个名称
`oninput`	`(event: Event) => void`	`—`	`oninput={(value) => { /* handle value */ }}`	指针拖动或原生输入更新后调用，传入 Event（指针路径为 PointerEvent）；value 已完成范围与步长归一化，回调不能取消该更新。
`onchange`	`(event: Event) => void`	`—`	`onchange={(value) => { /* handle value */ }}`	指针拖动结束或原生 change 时调用，参数为对应 Event；读取绑定 value 获得提交值。
`children`	`Snippet`	`—`	`<Slider>Content</Slider>`	显式组合入口；可放置一至两个直系 `Text as="label"` 并替换内置 label
`parts`	`ComponentPartsOf<{ Text: typeof Text }>`	`—`	`parts={partsOptions}`	配置内置标题及 `showLabel` 生成的全部 Text；不影响显式 label