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

RangeSlider 范围滑块

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

基础用法

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

背景

[20, 80]

<script setup lang="ts">
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const range = ref<[number, number]>([20, 80]);
</script>

<template>
  <div class="rangeslider-demo">
    <CfRangeSlider v-model="range" :min="0" :max="100" />
    <div class="rangeslider-demo__value">
      [{{ range[0] }}, {{ range[1] }}]
    </div>
  </div>
</template>

<style scoped>
.rangeslider-demo {
  width: min(100%, 640px);
  padding: 16px 0;
}

.rangeslider-demo__value {
  margin-top: 12px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
}
</style>

<script setup>
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const range = ref<[number, number]>([20, 80]);
</script>

<template>
  <div class="rangeslider-demo">
    <CfRangeSlider v-model="range" :min="0" :max="100" />
    <div class="rangeslider-demo__value">
      [{{ range[0] }}, {{ range[1] }}]
    </div>
  </div>
</template>

<style scoped>
.rangeslider-demo {
  width: min(100%, 640px);
  padding: 16px 0;
}

.rangeslider-demo__value {
  margin-top: 12px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
}
</style>

<CfRangeSlider value={range} onChange={setRange} 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

<script setup lang="ts">
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const a = ref<[number, number]>([10, 50]);
const b = ref<[number, number]>([30, 70]);
const c = ref<[number, number]>([60, 90]);
</script>

<template>
  <div class="rangeslider-tones">
    <span class="rangeslider-tones__label">tone = success</span>
    <CfRangeSlider v-model="a" tone="success" />
    <span class="rangeslider-tones__label">tone = warning</span>
    <CfRangeSlider v-model="b" tone="warning" />
    <span class="rangeslider-tones__label">tone = error / disabled</span>
    <CfRangeSlider v-model="c" tone="error" disabled />
  </div>
</template>

<style scoped>
.rangeslider-tones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 640px);
}

.rangeslider-tones__label {
  color: var(--fg-3);
  font-size: 11px;
}
</style>

<script setup>
import { ref } from 'vue';
import { CfRangeSlider } from '@chufix-design/vue';
const a = ref<[number, number]>([10, 50]);
const b = ref<[number, number]>([30, 70]);
const c = ref<[number, number]>([60, 90]);
</script>

<template>
  <div class="rangeslider-tones">
    <span class="rangeslider-tones__label">tone = success</span>
    <CfRangeSlider v-model="a" tone="success" />
    <span class="rangeslider-tones__label">tone = warning</span>
    <CfRangeSlider v-model="b" tone="warning" />
    <span class="rangeslider-tones__label">tone = error / disabled</span>
    <CfRangeSlider v-model="c" tone="error" disabled />
  </div>
</template>

<style scoped>
.rangeslider-tones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 640px);
}

.rangeslider-tones__label {
  color: var(--fg-3);
  font-size: 11px;
}
</style>

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

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

API

属性	类型	默认值	说明
`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`