ui-slider 滑块组件

版本：v2.3.11

滑块组件用于在给定范围内选择一个或多个值，支持自定义样式和步长

基本使用

<template>
  <div class="slider-demo">
    <ui-slider v-model="value" />
    <p>当前值：{{ value }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value = ref(50);
</script>

<style scoped>
.slider-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
</style>

Props

参数	类型	默认值	说明
modelValue	Number/Array	0	当前值，支持单值和双
min	Number	0	最小
max	Number	100	最大
step	Number	1	步长
range	Boolean	false	是否为范围选择
disabled	Boolean	false	是否禁用
showValue	Boolean	false	是否显示当前
showTicks	Boolean	false	是否显示刻度
color	String	'#1989fa'	滑块颜色
backgroundColor	String	'#e5e5e5'	滑块背景
buttonSize	Number	20	滑块按钮大小，单位：px

Events

事件	说明	回调参数
change	值变化时触发	(value: Number/Array) 当前
input	实时拖动时触	(value: Number/Array) 当前
start	开始拖动时触发	(value: Number/Array) 当前
end	结束拖动时触	(value: Number/Array) 当前

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/slider/slider