开发预览更新于 2026-05-10

RangeSlider 范围滑块

双 knob 范围选择器，支持键盘导航与悬停 tooltip。

基础用法

v-model / value 接收 [number, number]。键盘 ↑↓←→ / PageUp / PageDown / Home / End 全支持。

[20, 80]

<CfRangeSlider v-model="range" :min="0" :max="100" />

<CfRangeSlider value={range} onChange={setRange} min={0} max={100} />

tone 控制填充色（success / warning / error）；与 Slider 共享 --cf-rs-* token。

tone = success

tone = warning

tone = error / disabled

<CfRangeSlider v-model="v" tone="success" />

<CfRangeSlider value={v} onChange={setV} tone="success" />

属性	类型	默认值	说明
`modelValue` / `value`	`[number, number]`	`[0, 100]`
`min` / `max`	`number`	`0` / `100`
`step`	`number`	`1`	步长
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`tone`	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`
`disabled` / `showTooltip`	`boolean`	`false` / `true`