Slider 滑块

通过滑动来选择一个或两个数值，支持多种自定义配置，包括滑块类型、方向、颜色、大小等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

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

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

Props

名称	描述	类型	默认值
type	滑块类型	String	'p'
direction	滑块方向	String	'horizontal'
min	最小值	Number	0
max	最大值	Number	100
modelValue	双滑块模式下的绑定值	Number[]	[]
activeColor	已选择的颜色	String	''
inactiveColor	未选择的颜色	String	''
blockSize	滑块按钮大小	String	'50'
fontSize	滑块数值字体大小	String	'28rpx'
showValue	是否显示滑块数值	Boolean	false
showValuePosition	滑块数值显示位置	Boolean	true
decimalPlaces	滑块数值的小数位数	Number	0
trackSize	滑块轨道的尺寸	String	'5'
showMode	滑块数值的显示模式	String	'before'

Events

名称	描述
update:modelValue	当滑块值更新时触发
change	当滑块值改变时触发