你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

滑动条 TmSlider

滑动条组件，用于滑动条中展示选项。

🌶️ 示例

查看模拟效果－

示例模板

<template>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">单向滑块 TmSlider</tm-text>
        <view>
            <tm-text>分单向和双向滑动条</tm-text>
        </view>
    </tm-sheet>
    
    <tm-sheet>
        <view class="mt-n8">
            <tm-slider v-model="val" ></tm-slider>
        </view>
        <view class="mt-n16">
            <tm-slider v-model="val" color="success" ></tm-slider>
        </view>
        <view class="mt-n16">
            <tm-slider v-model="val" size="36" color="error" btn-size="36" round="36"></tm-slider>
        </view>
        <view class="mt-n16">
            <tm-button @click="val=80" block>手动赋值</tm-button>
        </view>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">显示标签及渐变背景</tm-text>
        <view class="mt-n16">
            <tm-slider showLabel color="#4DEF8E" btn-size="50" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-slider>
        </view>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">步进值20</tm-text>
        <view class="mt-n16">
            <tm-slider showLabel  color="error" :step="20" ></tm-slider>
        </view>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36"  class="text-weight-b d-block">双向向滑块 TmSlider</tm-text>
    </tm-sheet>

     <tm-sheet>
        <view class="mt-n16">
            <tm-slider-double showLabel color="#4DEF8E" btn-size="50" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)"></tm-slider-double>
        </view>
    </tm-sheet>
    <view style="height: 80px;"></view>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const val = ref(50)
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
modelValue	number	0	等同v-model当前值
max	number	100	最大值
min	number	0	最小值
disabled	boolean	false	是否禁用
step	number	1	步进值
stepCount	number	0	步进值刻度值比如max-min为100总值,刻度为20,那么setpCount就是4,
color	string	''	激活时的颜色，空值取全局值，linearColor不空时取背景色会取linearColor，但其它label和按钮焦点色还是这个值。
bgColor	string	'info'	默认的背景色
size	string	'12'	滑条的大小
btnSize	string	'46'	滑块的尺寸
round	string	'12'	滑条的圆角。为空值时，取全局的进度条值
showLabel	boolean	false	是否显示进度条上的label文本
labelColor	string	'white'	文本颜色
labelFontSize	string	'18'	文本文字大小
linearColor	string	''	线性渐变背景颜色

🌹 事件

事件名	参数	返回数据	描述
change	名称：value,当前的值,	-	拖动变换时触发
update:modelValue	-	-	-

🌽 slot插槽

插槽名	数据	描述

🥗 ref方法

方法名	参数	返回值	描述