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

Slider 滑块

单值范围滑块，3 档尺寸 × 4 种 tone，支持 step、刻度、当前值气泡，全键盘可达。

基础用法

最简形态 — 0 到 100 的连续值，鼠标拖拽 thumb 或键盘 ← → 调整。showValue 在 thumb 上挂一个气泡显示当前值。

<CfSlider v-model="value" show-value />

<CfSlider value={value} onChange={setValue} showValue />

4 种 tone

tone 控制填充色 — primary（默认）/ success / warning / danger。语义化用色，对应 token 里 4 套 --accent-* / --status-*。

<CfSlider v-model="a" tone="primary" show-value />
<CfSlider v-model="b" tone="success" show-value />
<CfSlider v-model="c" tone="warning" show-value />
<CfSlider v-model="d" tone="danger" show-value />

<CfSlider value={a} onChange={setA} tone="primary" showValue />
<CfSlider value={b} onChange={setB} tone="success" showValue />
<CfSlider value={c} onChange={setC} tone="warning" showValue />
<CfSlider value={d} onChange={setD} tone="danger" showValue />

三档尺寸

size 改变轨道粗细与 thumb 直径：sm（细）/ md（默认）/ lg（粗，触摸友好）。

<CfSlider v-model="a" size="sm" />
<CfSlider v-model="b" size="md" />
<CfSlider v-model="c" size="lg" />

<CfSlider value={a} onChange={setA} size="sm" />
<CfSlider value={b} onChange={setB} size="md" />
<CfSlider value={c} onChange={setC} size="lg" />

步进与刻度

step 控制每次步进的最小单位。ticks 在每个 step 位置渲染一个刻度点 — 适合离散值（评分 / 等级）；当 (max-min)/step > 50 时刻度自动忽略避免视觉拥挤。

<!-- 0~5 评分 -->
<CfSlider v-model="stars" :min="0" :max="5" :step="1" ticks show-value />
<!-- 10% 步进 -->
<CfSlider v-model="percent" :step="10" ticks show-value />

<CfSlider value={stars} onChange={setStars} min={0} max={5} step={1} ticks showValue />
<CfSlider value={percent} onChange={setPercent} step={10} ticks showValue />

禁用

disabled 灰显且阻止鼠标 / 键盘交互；当前值仍按 prop 显示。

<CfSlider :model-value="50" disabled show-value />

<CfSlider value={50} disabled showValue />

事件与提交

拖拽时 change 持续返回当前值；松开指针或键盘提交时触发 changeEnd / onChangeEnd。meta 会标记来源是 pointer 还是 keyboard，便于区分实时预览和最终保存。

idleCPU 预留 40%

拖动或用键盘调整滑块，会记录 change 与 changeEnd。

<CfSlider
v-model="cpu"
:step="5"
ticks
show-value
@change="(value, meta) => preview(value, meta.source)"
@change-end="(value, meta) => save(value, meta.source)"
/>

<CfSlider
value={cpu}
step={5}
ticks
showValue
onChange={(value, meta) => preview(value, meta.source)}
onChangeEnd={(value, meta) => save(value, meta.source)}
/>

键盘交互

按键	行为
`←` / `↓`	减少 1 个 step
`→` / `↑`	增加 1 个 step
`PgDn` / `PgUp`	减少 / 增加 10 个 step
`Home`	跳到 `min`
`End`	跳到 `max`

API

Prop	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`number`	`0`	当前值
`min`	`number`	`0`	最小值
`max`	`number`	`100`	最大值
`step`	`number`	`1`	步进
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	滑块/轨道粗细
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	填充色
`showValue`	`boolean`	`false`	thumb 上显示当前值气泡
`ticks`	`boolean`	`false`	渲染刻度（步数过多自动忽略）
`disabled`	`boolean`	`false`	禁用

Events

事件	载荷	说明
`change` / `onChange`	`(value, meta)`	值变化时触发；`meta.source` 为 `pointer` 或 `keyboard`
`changeEnd` / `onChangeEnd`	`(value, meta)`	指针松开或键盘提交后触发，适合保存最终值