低代码高性能原生UI框架

Appearance

本页导读

Slider 滑块选择器 ​

组件类型：UxSliderComponentPublicInstance

支持双滑块、竖向滑动，可设置步长和最小值、最大值

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

Props ​

属性名类型默认值说明
nameString-标识符，在回调事件中返回
modeString'normal'模式
directionString'horizontal'方向
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于 0，并且可被(max - min)整除
valueNumber-当前取值
activeColorString$ux.Conf.primaryColor已选择部分的线条颜色
darkColorString-深色
backgroundColorString#e0e0e0背景条颜色
backgroundDark#a9a9a9-深色
blockSizeNumber18滑块的大小
blockColorString'#ffffff'滑块颜色
borderColor--深色
showValueBooleanfasle是否显示当前 value
showModeString'up'显示方式
unitString-单位
sizeNumber2尺寸
cornerNumber0圆角 仅web支持
disabledBooleanfalse是否禁用

mode ​

值说明
normal正常
range范围

direction ​

值说明
horizontal水平
vertical垂直

darkColor ​

值说明
none不显示
auto自动适配深色模式
color其他颜色

showMode ​

值说明
up上方跟随
bottom下方跟随

Events ​

事件名说明参数
change完成一次拖动后触发事件event: UXSliderEvent
changing拖动过程中触发事件event: UXSliderEvent

示例代码 ​

html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll :disabled="moving">
			<ux-card direction="column" icon="flag" title="滑动选择器" :bold="true">
				<ux-text text="支持双滑块、竖向滑动，可设置步长和最小值、最大值"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="滑动选择器" text="https://www.uxframe.cn/component/form/slider.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-slider :value="value1" @changing="changing1"></ux-slider>
					<ux-slider theme="warning" :value="value1" @changing="changing1" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="双滑块" :bold="true">
				<ux-text :text="`值：${value2.join(', ')}`" :mb="15"></ux-text>
				<ux-row>
					<ux-slider :values="value2" mode="range" :showValue="true" show-mode="up" :size="4" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义范围" :bold="true">
				<ux-text :text="`值：${value3}`" :mb="15"></ux-text>
				<ux-row style="width: 300px;">
					<ux-slider :value="value3" :min="20" :max="180" :showValue="true" show-mode="bottom" active-color="red" @changing="changing3" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="步长" :bold="true">
				<ux-text :text="`可指定步长(每次步进5)：${value4}`" :mb="15"></ux-text>
				<ux-row>
					<ux-slider :value="value4" :step="5" block-color="blue" @changing="changing4" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="竖向" :bold="true">
				<ux-text :text="`支持竖向滑动：${value5}`" :mb="15"></ux-text>
				<ux-row style="height: 300px;">
					<ux-slider :value="value5" :showValue="true" show-mode="up" direction="vertical" :size="4" @changing="changing5" @touchstart="touchstart" @touchend="touchend"></ux-slider>
					
					<ux-slider style="margin-left: 15px;" :values="value2" mode="range" :showValue="true" :size="8" :corner="4" show-mode="bottom" direction="vertical" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll :disabled="moving">
			<ux-card direction="column" icon="flag" title="滑动选择器" :bold="true">
				<ux-text text="支持双滑块、竖向滑动，可设置步长和最小值、最大值"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="滑动选择器" text="https://www.uxframe.cn/component/form/slider.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-slider :value="value1" @changing="changing1"></ux-slider>
					<ux-slider theme="warning" :value="value1" @changing="changing1" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="双滑块" :bold="true">
				<ux-text :text="`值：${value2.join(', ')}`" :mb="15"></ux-text>
				<ux-row>
					<ux-slider :values="value2" mode="range" :showValue="true" show-mode="up" :size="4" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义范围" :bold="true">
				<ux-text :text="`值：${value3}`" :mb="15"></ux-text>
				<ux-row style="width: 300px;">
					<ux-slider :value="value3" :min="20" :max="180" :showValue="true" show-mode="bottom" active-color="red" @changing="changing3" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="步长" :bold="true">
				<ux-text :text="`可指定步长(每次步进5)：${value4}`" :mb="15"></ux-text>
				<ux-row>
					<ux-slider :value="value4" :step="5" block-color="blue" @changing="changing4" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="竖向" :bold="true">
				<ux-text :text="`支持竖向滑动：${value5}`" :mb="15"></ux-text>
				<ux-row style="height: 300px;">
					<ux-slider :value="value5" :showValue="true" show-mode="up" direction="vertical" :size="4" @changing="changing5" @touchstart="touchstart" @touchend="touchend"></ux-slider>
					
					<ux-slider style="margin-left: 15px;" :values="value2" mode="range" :showValue="true" :size="8" :corner="4" show-mode="bottom" direction="vertical" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
				</ux-row>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	import { UXSliderEvent } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	const value1 = ref(20)
	const value2 = ref<number[]>([10, 80] as number[])
	const value3 = ref(30)
	const value4 = ref(60)
	const value5 = ref(50)
	const moving = ref(false)
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function changing1(e: UXSliderEvent) {
		value1.value = e.value
	}
	
	function changing2(e: UXSliderEvent) {
		value2.value = e.values
	}
	
	function changing3(e: UXSliderEvent) {
		value3.value = e.value
	}
	
	function changing4(e: UXSliderEvent) {
		value4.value = e.value
	}
	
	function changing5(e: UXSliderEvent) {
		value5.value = e.value
	}
	
	function touchstart() {
		moving.value = true
	}
	
	function touchend() {
		moving.value = false
	}
</script>
<script setup>
	import { UXSliderEvent } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	const value1 = ref(20)
	const value2 = ref<number[]>([10, 80] as number[])
	const value3 = ref(30)
	const value4 = ref(60)
	const value5 = ref(50)
	const moving = ref(false)
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function changing1(e: UXSliderEvent) {
		value1.value = e.value
	}
	
	function changing2(e: UXSliderEvent) {
		value2.value = e.values
	}
	
	function changing3(e: UXSliderEvent) {
		value3.value = e.value
	}
	
	function changing4(e: UXSliderEvent) {
		value4.value = e.value
	}
	
	function changing5(e: UXSliderEvent) {
		value5.value = e.value
	}
	
	function touchstart() {
		moving.value = true
	}
	
	function touchend() {
		moving.value = false
	}
</script>
css
<style lang="scss">
	
</style>
<style lang="scss">
	
</style>