UniApp 组件 · 实验

UGSlider 滑块

支持范围、步长和当前值显示的滑块。

组件预览

以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。

使用方式

配置 easycom 后直接使用 <ug-slider>，无需在页面脚本中导入组件。

vue

<script setup lang="ts">
import { ref } from 'vue'
const volume = ref(40)
</script>
<template><ug-slider v-model="volume" label="音量" :step="5" /></template>

easycom 公开入口：@ug666/ui-uniapp/components/ug-slider/ug-slider.vue

属性

属性	类型	默认值	说明
modelValue	number	0	通过 v-model 管理当前值。
min	number	0	最小值。
max	number	100	最大值。
step	number	1	步长，应大于 0 且能整除区间。
disabled	boolean	Provider	禁用滑动。
showValue	boolean	false	使用原生当前值显示。
activeColor	string	Token primary	已选择轨道颜色。
backgroundColor	string	Token border	未选择轨道颜色。
blockColor	string	Token surface	滑块颜色。
blockSize	number	24	滑块尺寸，原生范围 12–28。
label	string	—	滑块上方标签。

事件

事件	参数	说明
update:modelValue	value: number	完成拖动后更新 v-model。
change	value: number	完成一次拖动后触发。
changing	value: number	拖动过程中持续触发。

注意事项

区间、步长与 blockSize 的合法性由业务层保证。
频繁业务请求不要直接绑定 changing，应在业务层节流。

平台边界

总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。

MP-WEIXIN 已编译开发者工具与真机待验证