Slider - 滑块

更新日期

2026-10-04 UTC

Demo

slider/demo.vue

单值：40

区间：20 – 70

<script setup lang="ts">
import { ref } from 'vue'

const single = ref([40])
const range = ref([20, 70])
</script>

<template>
  <div class="flex flex-col gap-6">
    <div class="flex flex-col gap-2">
      <YlfSlider v-model="single" label="音量" />
      <p class="m-0 text-sm op-70">
        单值：{{ single[0] }}
      </p>
    </div>
    <div class="flex flex-col gap-2">
      <YlfSlider v-model="range" label="价格区间" :thumb-labels="['最低价格', '最高价格']" />
      <p class="m-0 text-sm op-70">
        区间：{{ range[0] }} – {{ range[1] }}
      </p>
    </div>
  </div>
</template>

滑块：拖拽、键盘步进、多滑块区间基于 reka-ui，外观走 token。v-model 为数组，单值传 [n]、区间传 [a, b]。

Props

属性	说明	类型	默认值
v-model	当前值	number[]	[50]
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
disabled	禁用	boolean	false
label	单值或整组用途名称	string	数值
thumbLabels	按顺序指定每个滑块的名称	readonly string[]	—

单值使用 label="音量"；区间使用 :thumb-labels="['最低价格', '最高价格']"。未指定端点名称时，使用 label 和顺序编号。方向键按 step 调整，Home / End 到达边界；禁用时滑块不进入键盘焦点顺序。触摸设备提供至少 44px 的操作区域，减少动态效果时关闭过渡。

Events

valueCommit 在一次拖动或键盘调整完成时回传 number[]。需要在交互完成后保存数据时，使用 @value-commit；界面状态继续使用 v-model。