单滑块 xSlider

---

在线预览

在线模拟尺寸:

介绍

此为单向滑块,双向滑块见:x-slider-double

平台兼容

H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑️	☑️	x	☑️	4.14+	1.0.0

文件路径

@/uni_modules/tmx-ui/components/x-slider/x-slider.uvue

使用

<x-slider></x-slider>

Props 属性

名称	说明	类型	默认值
modelValue	等同v-model当前的值	number	0
max	最大值	number	100
min	最小值	number	0
disabled	是否禁用	boolean	false
step	步进值	number	0
stepCount	步进值刻度值<br>比如max-min为100总值,刻度为20,那么setpCount就是4,	number	0
color	激活时的颜色，空值取全局值	string	""
bgColor	默认的背景色	string	"info"
size	滑条的大小	string	"3"
btnSize	滑块的尺寸	string	"24"
round	滑条的圆角。<br>为空值时，取全局的进度条值	string	""
showLabel	是否显示进度条上的label文本	boolean	false
labelColor	文本颜色	string	"black"
labelFontSize	文本文字大小	string	"12"

Events 事件

名称	参数	说明
change	**value** : number	拖动变换时触发
update:modelValue	**value** : number	松开拖动按钮时触发同步值，等同v-model

Slots 插槽

名称	说明	数据
right	右插槽	value : number value : number percentage : number percentage : number

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/biaodan/slider

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">滑块 Slider</x-text>
			<x-text color="#999999" >双向和单向滑块分属两个组件</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-16">单向</x-text>
			<x-slider :model-value="64"></x-slider>
			<x-text  font-size="18" class=" text-weight-b my-16">显示文本和颜色及刻度</x-text>
			<x-slider :min="0" :max="100" :step="10"  :model-value="0" color="error" :show-label="true"></x-slider>
			<x-text font-size="18" class=" text-weight-b mb-16">修改条及滑块按钮大小及,min,max</x-text>
			<x-slider :min="50" :max="300"  v-model="nowValue" label-font-size="16" btn-size="32" size="10" color="success" :show-label="true"></x-slider>
			
			<view class="mt-20">
				<x-button :block="true" @click="nowValue=200">动态赋值200</x-button>
			</view>
		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-16">双向</x-text>
			<x-slider-double :model-value="[10,30]"></x-slider-double>
			<x-text font-size="18" class=" text-weight-b my-16">显示文本和颜色</x-text>
			<x-slider-double :model-value="[30,80]" color="error" :show-label="true"></x-slider-double>
			<x-text font-size="18" class=" text-weight-b my-16">修改条及滑块按钮大小及,min,max</x-text>
			<x-slider-double :show-label="true" :stepCount="5" :step="50" :min="50" :max="300"  v-model="nowValueDouble" btn-size="30" size="20" color="success" ></x-slider-double>
			
			<view class="mt-20">
				<x-button :block="true" @click="nowValueDouble=[50,200]">动态赋值[80,200]</x-button>
			</view>
		</x-sheet>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				nowValue:80,
				nowValueDouble:[100,150],
			};
		}
	}
</script>

<style lang="scss">

</style>