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

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

import { useState } from 'react';
import { CfRangeSlider } from '@chufix-design/react';

export default function Demo() {
  const [range, setRange] = useState([20, 80]);
  const [range, setRange] = useState([20, 80]);
  return (
    <>
      <CfRangeSlider value={range} onChange={setRange} min={0} max={100} />
    </>
  );
}

import { useState } from 'react';
import { CfRangeSlider } from '@chufix-design/react';

export default function Demo() {
  const [range, setRange] = useState([20, 80]);
  const [range, setRange] = useState([20, 80]);
  return (
    <>
      <CfRangeSlider value={range} onChange={setRange} min={0} max={100} />
    </>
  );
}

Tone

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

背景视口

src/App.vue

<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">
    <CfRangeSlider v-model="a" tone="success" />
    <CfRangeSlider v-model="b" tone="warning" />
    <CfRangeSlider v-model="c" tone="error" disabled />
  </div>
</template>
<style scoped>
.rangeslider-tones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 640px);
}
</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">
    <CfRangeSlider v-model="a" tone="success" />
    <CfRangeSlider v-model="b" tone="warning" />
    <CfRangeSlider v-model="c" tone="error" disabled />
  </div>
</template>
<style scoped>
.rangeslider-tones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 640px);
}
</style>

import { useState } from 'react';
import { CfRangeSlider } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<[number, number]>([10, 50]);
  const [b, setB] = useState<[number, number]>([30, 70]);
  const [c, setC] = useState<[number, number]>([60, 90]);
  return (
    <>
      <div className="rangeslider-tones">
          <CfRangeSlider value={a} onChange={setA} tone="success" />
          <CfRangeSlider value={b} onChange={setB} tone="warning" />
          <CfRangeSlider value={c} onChange={setC} tone="error" disabled />
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfRangeSlider } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<[number, number]>([10, 50]);
  const [b, setB] = useState<[number, number]>([30, 70]);
  const [c, setC] = useState<[number, number]>([60, 90]);
  return (
    <>
      <div className="rangeslider-tones">
          <CfRangeSlider value={a} onChange={setA} tone="success" />
          <CfRangeSlider value={b} onChange={setB} tone="warning" />
          <CfRangeSlider value={c} onChange={setC} tone="error" disabled />
        </div>
    </>
  );
}

API

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`