单滑块 xSlider

---

在线预览

在线模拟尺寸:

介绍

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

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/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	步进值刻度值 比如max-min为100总值,刻度为20,那么setpCount就是4,	number	0
color	激活时的颜色，空值取全局值	string	""
bgColor	默认的背景色	string	"info"
size	滑条的大小	string	"3"
btnSize	滑块的尺寸	string	"24"
round	滑条的圆角。 为空值时，取全局的进度条值	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 setup lang="ts">
	import { ref } from 'vue'
	
	const nowValue = ref(80)
	const nowValueDouble = ref<number[]>([100,150])
	
</script>

<style lang="scss">

</style>