# t-slider

Slider 滑块

t-slider 组件介绍

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

t-slider 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-slider 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title='SliderPlus 滑块升级版'
				sub-title="canvas绘制丝滑不卡,支持显示百分比或者显示值,支持多滑块,滑块数据取决于绑定value值数组的长度"
				class="mb-15"></t-card>
		<t-section class="mb-15"
				   title="显示值"></t-section>
		<t-slider class="r-10 h-130 mb-15"
				  direction="horizontal"
				  :min="0"
				  :max="500"
				  type="primary"
				  blockSize="30"
				  :disabled="false"
				  :showValue="true"
				  trackSize="10"
				  v-model="values"
				  showMode="after" />
		<t-section class="mb-15"
				   title="显示百分比"></t-section>
		<t-slider class="r-10 h-130 mb-15"
				  direction="horizontal"
				  type="primary"
				  blockSize="25"
				  :disabled="false"
				  trackSize="5"
				  :modelValue="[0]" />
		<t-section class="mb-15"
				   title="防止文本超出边界"></t-section>
		<t-slider class="r-10 h-130 mb-15"
				  :min="999999999"
				  :max="99999999999"
				  direction="horizontal"
				  type="primary"
				  :showValue="true"
				  blockSize="25"
				  :disabled="false"
				  trackSize="5"
				  :modelValue="[999999999, 99999999999]" />
		<t-row class="mb-15">
			<t-slider class="r-10 h-300 w-130 mr-15"
					  :min="0"
					  :max="500"
					  :modelValue="[0, 105, 250]"
					  direction="vertical"
					  type="error"
					  showMode="after"
					  blockSize="25"
					  trackSize="10" />
			<t-slider class="r-10 h-300 w-130"
					  :min="0"
					  :max="500"
					  :modelValue="[0, 105, 250]"
					  direction="vertical"
					  type="success"
					  blockSize="25"
					  trackSize="10" />
		</t-row>
	</view>
</template>

<script setup>
	const values = ref([0, 105, 500])
</script>

t-slider Props

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

t-slider Events

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