Preview Updated 2026-05-10

Range slider

Two-knob range picker with keyboard navigation and hover tooltip.

Basic usage

v-model / value accepts [number, number]. Full keyboard support: ↑↓←→ / PageUp / PageDown / Home / End.

[20, 80]

src/App.vue vue

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

src/App.tsx tsx

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

tone controls the fill color (success / warning / error); shares the --cf-rs-* tokens with Slider.

tone = success

tone = warning

tone = error / disabled

src/App.vue vue

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

src/App.tsx tsx

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

Prop	Type	Default	Description
`modelValue` / `value`	`[number, number]`	`[0, 100]`
`min` / `max`	`number`	`0` / `100`
`step`	`number`	`1`	Step
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`tone`	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`
`disabled` / `showTooltip`	`boolean`	`false` / `true`