Slider - 滑块

Demo

Last Changed

7 minutes ago

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" />
      <p class="m-0 text-sm op-70">
        单值：{{ single[0] }}
      </p>
    </div>
    <div class="flex flex-col gap-2">
      <YlfSlider v-model="range" />
      <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