slider

Component Type：UniSliderElement

滑动选择器

Attributes

name	type	default	description
disabled	boolean	-	是否禁用
min	number	0	slider 最小值
max	number	100	slider 最大值
step	number	1	slider 步长，取值必须大于 0，并且可被(max - min)整除
value	number	0	radio当前取值
color	string.ColorString	-	slider 背景条的颜色（请使用 backgroundColor）
activeColor	string.ColorString	#007aff	slider 滑块左侧已选择部分的线条颜色
backgroundColor	string.ColorString	#e9e9e9	radio背景条的颜色
block-size	number	28	radio滑块的大小，取值范围为 12 - 28
block-color	string.ColorString	#ffffff	滑块颜色
show-value	boolean	false	是否显示当前 value
@change	(event: SliderChangeEvent) => void	-	完成一次拖动后触发的事件，event.detail = {value: value}
@changing	(event: SliderChangeEvent) => void	-	拖动过程中触发的事件，event.detail = {value: value}

Event

SliderChangeEvent

Constructor

name	type	required	default	description
value	number	YES	-	-

SliderChangeEvent Values

name	type	required	default	description
detail	SliderChangeEventDetail	YES	-	-
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

SliderChangeEventDetail Values

name	type	optinal	default	description
ctors	Constructor	YES	-	-
value	number	YES	-	-

SliderChangeEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

Example

hello uni-app x

<script>
 export default {
   data() {
     return {
       sliderValue: 50,
       sliderBlockSize: 20,
       sliderBackgroundColor: "#000000",
       sliderActiveColor: "#FFCC33",
       sliderBlockColor: "#8A6DE9",
       // 组件属性 autotest
       show_value_boolean: false,
       disabled_boolean: false,
       min_input: 0,
       max_input: 100,
       step_input: 1,
       value_input: 0,
       activeColor_input: "#007aff",
       backgroundColor_input: "#e9e9e9",
       block_size_input: 28,
       block_color_input: "#ffffff",
     };
   },
   methods: {
     sliderChange(e : SliderChangeEvent) {
       console.log("value 发生变化：" + e.detail.value);
     },
     slider_click() {
       console.log("组件被点击时触发");
     },
     slider_touchstart() {
       console.log("手指触摸动作开始");
     },
     slider_touchmove() {
       console.log("手指触摸后移动");
     },
     slider_touchcancel() {
       console.log("手指触摸动作被打断，如来电提醒，弹窗");
     },
     slider_touchend() {
       console.log("手指触摸动作结束");
     },
     slider_tap() {
       console.log("手指触摸后马上离开");
     },
     slider_longpress() {
       console.log(
         "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
       );
     },
     slider_change() {
       console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
     },
     slider_changing() {
       console.log("拖动过程中触发的事件，event.detail = {value: value}");
     },
     change_show_value_boolean(checked : boolean) {
       this.show_value_boolean = checked;
     },
     change_disabled_boolean(checked : boolean) {
       this.disabled_boolean = checked;
     },
     confirm_min_input(value : number) {
       this.min_input = value;
     },
     confirm_max_input(value : number) {
       this.max_input = value;
     },
     confirm_step_input(value : number) {
       this.step_input = value;
     },
     confirm_value_input(value : number) {
       this.value_input = value;
     },
     confirm_activeColor_input(value : string) {
       this.activeColor_input = value;
     },
     confirm_backgroundColor_input(value : string) {
       this.backgroundColor_input = value;
     },
     confirm_block_size_input(value : number) {
       this.block_size_input = value;
     },
     confirm_block_color_input(value : string) {
       this.block_color_input = value;
     },
   },
 };
</script>

<template>
 <view class="main">
   <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
     :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
     :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
     @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
     @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
     @changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
 </view>

 <!-- #ifdef APP -->
 <scroll-view style="flex: 1">
 <!-- #endif -->
   <view class="content nvue">
     <page-head title="组件属性"></page-head>
     <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
     <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
     <input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
     <input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
     <input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
       @confirm="confirm_step_input"></input-data>
     <input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
     <input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
       @confirm="confirm_activeColor_input"></input-data>
     <input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
       @confirm="confirm_backgroundColor_input"></input-data>
     <input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
       @confirm="confirm_block_size_input"></input-data>
     <input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
   </view>

   <view class="uni-padding-wrap">
     <page-head title="默认及使用"></page-head>
     <view class="uni-title">显示当前value</view>
     <view>
       <slider @change="sliderChange" :value="50" :show-value="true" />
     </view>

     <view class="uni-title">设置步进:step=10跳动</view>
     <view>
       <view class="uni-row">
         <text>0</text>
         <text class="m-l-a">100</text>
       </view>
       <slider @change="sliderChange" :value="60" :step="10" />
     </view>

     <view class="uni-title">浮点步进:step=0.01跳动</view>
     <view>
       <slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
     </view>

     <view class="uni-title">设置最小/最大值</view>
     <view>
       <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
     </view>

     <view class="uni-title">不同颜色和大小的滑块</view>
     <view>
       <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
         :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
         :block-size="sliderBlockSize" />
     </view>
   </view>
 <!-- #ifdef APP -->
 </scroll-view>
 <!-- #endif -->
</template>

<style>
 .main {
   max-height: 500rpx;
   padding: 10rpx 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   flex-direction: row;
   justify-content: center;
 }

 .main .list-item {
   width: 100%;
   height: 200rpx;
   border: 1px solid #666;
 }

 .m-l-a {
   margin-left: auto;
 }
</style>

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
slider	5.0	√	3.9+	9.0	√	x
disabled	5.0	√	3.9+	9.0	√	x
min	5.0	√	3.9+	9.0	√	x
max	5.0	√	3.9+	9.0	√	x
step	5.0	√	3.9+	9.0	√	x
value	5.0	√	3.9+	9.0	√	x
color	5.0	√	3.9+	9.0	√	x
activeColor	5.0	√	3.9+	9.0	√	x
backgroundColor	5.0	√	3.9+	9.0	√	x
block-size	5.0	√	3.9+	9.0	√	x
block-color	5.0	√	3.9+	9.0	√	x
show-value	5.0	√	3.9+	9.0	√	x
@change	5.0	√	3.9+	9.0	√	x
@changing	5.0	√	3.9+	9.0	√	x

tips

show-value属性设为true后，会在横条右侧显示一个数字。

但注意app-uvue中，value显示区的默认宽度是4位数字。超出宽度后，后面的数字无法显示。即最大9999。（其他平台不限制）

如您需要5位或更多数字，请将show-value设为false或不设，自行写一个text组件，绑定value的数值来显示。

See also

• Related Bug