slider

About 12 min

slider

滑动条组件,用来快速调节设置值,如音量、亮度等。

子组件

不支持。

属性

除支持通用属性外,还支持如下属性:

名称

类型

默认值

必填

描述

min

number

0

滑动选择器的最小值。

max

number

100

滑动选择器的最大值。

step

number

1

每次滑动的步长。

value

number

0

滑动选择器的初始值。

mode5+

string

outset

滑动条样式:

  • outset:滑块在滑杆上;
  • inset:滑块在滑杆内。
    说明:

    仅手机和平板设备支持。

showsteps5+

boolean

false

是否显示步长标识;

说明:

仅手机和平板设备支持。

showtips5+

boolean

false

滑动时是否有气泡提示百分比;

说明:

仅手机和平板设备支持。

样式

除支持通用样式外,还支持如下样式:

名称

类型

默认值

必填

描述

color

<color>

#19000000

滑动条的背景颜色。

selected-color

<color>

#ff007dff

滑动条的已选择颜色。

block-color

<color>

#ffffff

滑动条的滑块颜色。

说明:

仅手机、平板和智慧屏设备支持。

事件

除支持通用事件外,还支持如下事件:

名称

参数

描述

change

ChangeEvent

选择值发生变化时触发该事件。

表 1 ChangeEvent

属性

类型

说明

progress(deprecated5+)

string

当前slider的进度值。

isEnd(deprecated5+)

string

当前slider是否拖拽结束,可选值为:

  • true:slider拖拽结束。
  • false:slider拖拽中。

value5+

number

当前slider的进度值。

mode5+

string

当前change事件的类型,可选值为:

  • start:slider的值开始改变。
  • move:slider的值跟随手指拖动中。
  • end:slider的值结束改变。

示例

<!-- xxx.hml -->
<div class="container">
  <text>slider start value is {{startValue}}</text>
  <text>slider current value is {{currentValue}}</text>
  <text>slider end value is {{endValue}}</text>
  <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
</div>
1
2
3
4
5
6
7
/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
6
// xxx.js
export default {
  data: {
    value: 0,
    startValue: 0,
    currentValue: 0,
    endValue: 0,
  },
  setvalue(e) {
    if (e.mode == "start") {
      this.value = e.value;
      this.startValue = e.value;
    } else if (e.mode == "move") {
      this.value = e.value;
      this.currentValue = e.value;
    } else if (e.mode == "end") {
      this.value = e.value;
      this.endValue = e.value;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21