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

Slider 滑块

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

基础用法

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

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const value = ref(40);
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="value" show-value />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const value = ref(40);
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="value" show-value />
  </div>
</template>

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

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

4 种 tone

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

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const a = ref(60);
const b = ref(60);
const c = ref(60);
const d = ref(60);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <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 />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const a = ref(60);
const b = ref(60);
const c = ref(60);
const d = ref(60);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <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 />
  </div>
</template>

<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 />

<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（粗，触摸友好）。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const a = ref(40);
const b = ref(40);
const c = ref(40);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="a" size="sm" />
    <CfSlider v-model="b" size="md" />
    <CfSlider v-model="c" size="lg" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const a = ref(40);
const b = ref(40);
const c = ref(40);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="a" size="sm" />
    <CfSlider v-model="b" size="md" />
    <CfSlider v-model="c" size="lg" />
  </div>
</template>

<CfSlider value={a} onChange={setA} size="sm" />
<CfSlider value={b} onChange={setB} size="md" />
<CfSlider value={c} onChange={setC} 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 时刻度自动忽略避免视觉拥挤。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const stars = ref(3);
const percent = ref(40);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="stars" :min="0" :max="5" :step="1" ticks show-value />
    <CfSlider v-model="percent" :step="10" ticks show-value />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfSlider } from '@chufix-design/vue';

const stars = ref(3);
const percent = ref(40);
</script>

<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfSlider v-model="stars" :min="0" :max="5" :step="1" ticks show-value />
    <CfSlider v-model="percent" :step="10" ticks show-value />
  </div>
</template>

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

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

禁用

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

背景

<script setup lang="ts">
import { CfSlider } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfSlider :model-value="50" disabled show-value />
  </div>
</template>

<script setup>
import { CfSlider } from '@chufix-design/vue';
</script>

<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfSlider :model-value="50" disabled show-value />
  </div>
</template>

<CfSlider value={50} disabled showValue />

<CfSlider value={50} disabled showValue />

事件与提交

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

背景

idleCPU 预留 40%

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

<script setup lang="ts">
import { ref } from 'vue';
import { CfBadge, CfSlider, type SliderChangeMeta } from '@chufix-design/vue';

const cpu = ref(40);
const phase = ref('idle');
const logs = ref(['拖动或用键盘调整滑块，会记录 change 与 changeEnd。']);

function push(kind: string, value: number, meta: SliderChangeMeta) {
  phase.value = kind;
  logs.value = [
    `${kind}: value=${value} / source=${meta.source}`,
    ...logs.value,
  ].slice(0, 5);
}
</script>

<template>
  <div class="slider-events">
    <CfSlider
      v-model="cpu"
      :min="0"
      :max="100"
      :step="5"
      ticks
      show-value
      @change="(value, meta) => push('change', value, meta)"
      @change-end="(value, meta) => push('changeEnd', value, meta)"
    />
    <div class="slider-events__status">
      <CfBadge tone="info" :content="phase" />
      <span>CPU 预留 {{ cpu }}%</span>
    </div>
    <div class="slider-events__log" aria-live="polite">
      <code v-for="entry in logs" :key="entry">{{ entry }}</code>
    </div>
  </div>
</template>

<style scoped>
.slider-events {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
}

.slider-events__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.slider-events__log {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.slider-events__log code {
  white-space: normal;
}
</style>

<script setup>
import { ref } from 'vue';
import { CfBadge, CfSlider } from '@chufix-design/vue';

const cpu = ref(40);
const phase = ref('idle');
const logs = ref(['拖动或用键盘调整滑块，会记录 change 与 changeEnd。']);

function push(kind, value, meta) {
  phase.value = kind;
  logs.value = [
    `${kind}: value=${value} / source=${meta.source}`,
    ...logs.value,
  ].slice(0, 5);
}
</script>

<template>
  <div class="slider-events">
    <CfSlider
      v-model="cpu"
      :min="0"
      :max="100"
      :step="5"
      ticks
      show-value
      @change="(value, meta) => push('change', value, meta)"
      @change-end="(value, meta) => push('changeEnd', value, meta)"
    />
    <div class="slider-events__status">
      <CfBadge tone="info" :content="phase" />
      <span>CPU 预留 {{ cpu }}%</span>
    </div>
    <div class="slider-events__log" aria-live="polite">
      <code v-for="entry in logs" :key="entry">{{ entry }}</code>
    </div>
  </div>
</template>

<style scoped>
.slider-events {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
}

.slider-events__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.slider-events__log {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.slider-events__log code {
  white-space: normal;
}
</style>

<CfSlider
value={cpu}
step={5}
ticks
showValue
onChange={(value, meta) => preview(value, meta.source)}
onChangeEnd={(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)`	指针松开或键盘提交后触发，适合保存最终值