Slider 滑块

通过拖拽选择指定范围内的数值。

基础用法

36

当前值：36

<script setup>
import { ref } from 'vue'
import { DanSlider } from '@dandan-ui/ui'

const value = ref(36)
</script>

<template>
  <div>
    <DanSlider v-model="value" :show-stops="true" />
    <p style="margin: 8px 0 0; color: var(--dan-color-text-secondary)">
      当前值：{{ value }}
    </p>
  </div>
</template>

Slider Props

属性	说明	类型	默认值
modelValue / v-model	绑定值	number	0
min / max	最小值 / 最大值	number	0 / 100
step	步长	number	1
disabled	禁用	boolean	false
showStops	是否显示间断点	boolean	false
showTooltip	是否显示提示	boolean	true

Slider Events

事件	说明	参数
input	拖动过程中	(value)
change	松手或点击后	(value)