tm-sliders 双向滑块

提醒

此组件与它的子妹组件单向滑块基本是一致的用法。如果你想要使用单向滑块请前往单向滑块文档。

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-sliders v-model="value"></tm-sliders>

<script>
	export default {
		data() {
			return {
				value:[0,20],
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11

👉完整的示例

可以复制到页面直接运行

<template>
	
	<view>
		<tm-menubars title="双向滑块" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-sheet>
			<view class="py-24 text-size-n">基本示例</view>
			<view class="pb-36 text-size-n">数组：{{JSON.stringify(value)}},区间值：{{num}}</view>
			<tm-sliders show-left show-right @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
		<tm-sheet>
			
			<view class="py-24 text-size-n">刻度尺</view>
			<view class="pb-36 text-size-n">数组：{{JSON.stringify(value)}},区间值：{{num}}</view>
			<tm-sliders  color="bg-gradient-pink-accent" :step="10" @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
		<tm-sheet>
			<view class="py-24 text-size-n">竖向</view>
			<tm-sliders :height="350" color="bg-gradient-orange-accent" vertical @change="chenge" v-model="value"></tm-sliders>
		</tm-sheet>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
	export default {
		data() {
			return {
				value:[0,10],
				num:0,
			};
		},
		methods:{
			chenge(e){
				
				this.num = e;
			}
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

👉props属性表

提醒

如果你想要获取区间的数字，请在change事件中获取。如果只想绑定双向变量数组[a,b]则使用v-model即可。

属性名称	类型	可选值	默认值	说明
value	Array<Number>	任意数字数组	[0,10]	如果需要同步使用value.sync推荐使用v-model绑定
height	Number	任意数字	200	竖向模式时才有作用
width	Number	任意数字	0	横向时起作用，如果为0自动获取外层宽度。
max	Number	任意数字	100	显示的最大刻度
value-diog	Number	任意数字	0	取值小数点后几位
step	Number	任意数字	0	步长,设置请尽量大于20.太小滑动容易过小出问题。
color	String	主题色名称	primary	主题颜色名称,激活的颜色
bg-color	String	主题色名称	grey-lighten-2	底部不活动的背景色,颜色名称
left-icon	String	主题色名称	icon-minus	左边图标
right-icon	String	主题色名称	icon-plus	右边图标
disabled	Boolean	true/false	false	是否禁用
show-tip	Boolean	true/false	false	始终显示进度标签
show-left	Boolean	true/false	false	显示左边数据
show-right	Boolean	true/false	false	显示右边数据
vertical	Boolean	true/false	false	是否启用竖向模式

👉slot插槽

插槽名称	数据名称	数据类型	说明
left	data	object	左边位置模块
right	data	object	右边位置模块
tipsLeft	data	Object	第一个滑块上方显示的信息标签。data同value以及v-model数据
tipsRight	data	Object	第二个滑块上方显示的信息标签。data同value以及v-model数据

上方left,right的data数据格式

{ value: 同双向绑定的v-model数据, color: 主题色, icon: 左图标（右图标）,max:最大值  }

👉事件

事件名称	返回参数	返参类型	说明
@change	区间数字	Number	任一滑块位置变动时触发
@start	参数返回当前播放位置	Number	开始拖动时触发
@end	参数返回当前播放位置	Number	结束拖动时触发

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-sliders 双向滑块

# 👉使用方法,跟数1,2,3一样简单

# 👉完整的示例

# 👉props属性表

# 👉slot插槽

# 👉事件

# 👉更新日志