Tui Plus Vapor

Appearance

t-slider ​

Slider 滑块

组件介绍 ​

t-slider 是一个基于 Canvas 绘制的滑块组件，支持水平/垂直方向、单滑块/多滑块、显示数值/百分比等丰富功能。适用于音量调节、亮度调节、价格区间选择等场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/slider/slider.uvue，通过 v-model 双向绑定滑块值。

vue
<template>
  <view class="slider-demo">
    <!-- 单滑块 -->
    <t-slider v-model="value1" :min="0" :max="100"></t-slider>
    
    <!-- 显示数值 -->
    <t-slider v-model="value2" :showValue="true" :decimalPlaces="1"></t-slider>
    
    <!-- 显示百分比 -->
    <t-slider v-model="value3" :showValuePosition="true"></t-slider>
    
    <!-- 多滑块（区间选择） -->
    <t-slider v-model="rangeValue" :min="0" :max="1000"></t-slider>
    
    <!-- 垂直滑块 -->
    <t-slider v-model="value4" direction="vertical" :showValue="true"></t-slider>
  </view>
</template>

<script setup>
const value1 = ref([50]);
const value2 = ref([30]);
const value3 = ref([70]);
const rangeValue = ref([200, 800]);
const value4 = ref([60]);
</script>

<style scoped>
.slider-demo {
  padding: 40rpx;
}
.slider-demo t-slider {
  margin-bottom: 60rpx;
}
</style>

Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleanfalse
type组件主题类型，可选 info、primary、error、warning、successstring'primary'
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring''
direction滑块方向，可选 horizontal、verticalstring'horizontal'
min最小值number0
max最大值number100
modelValue双向绑定的值，数组格式支持多滑块number[][]
activeColor已选择部分的颜色string''（使用主题色）
inactiveColor未选择部分的颜色string'#f2f2f2'
blockSize滑块按钮的大小string'50'
fontSize数值显示字体大小string'28rpx'
showValue是否显示具体数值booleanfalse
showValuePosition是否显示百分比booleantrue
decimalPlaces保留的小数位数number0
trackSize滑块轨道尺寸string'5'
showMode数值显示位置，可选 before（滑块前）、after（滑块后）string'before'

Events ​

事件名说明回调参数
update:modelValue值更新时触发number[]
change值发生变化时触发number[]