slider开发指导
==========

slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考[slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-slider)。

#### 创建slider组件

在pages/index目录下的hml文件中创建一个slider组件。

<!-- xxx.hml -->
<div class="container">
  <slider></slider>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/96/v3/zEc4oWSqTYeqac_0KVBBBg/zh-cn_image_0000002625187689.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=85D898F40C83439D15CD02F0B93CC966D6C27897AB8FAA703D85718029B45A0C)

#### 设置样式和属性

slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。

<!-- xxx.hml -->
<div class="container">
  <slider class= "sli"></slider>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}
.sli{
  color: #fcfcfc;
  scrollbar-color: aqua;
  background-color: #b7e3f3;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4a/v3/nPqKpISISh-CcPwHyoc4Xg/zh-cn_image_0000002625107833.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=EF2B38387B0B7C61F0A0E827F4A5EF9B149CC23C87C80F098354CDD49DBF391B)

通过添加min、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。

<!-- xxx.hml -->
<div class="container">
  <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c6/v3/mUHTcEaYRDeIgOkdV8tXVQ/zh-cn_image_0000002594668316.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=3158F871798148307882761DF925A1D1D318FFAE91249A010CD57C2EE56D7947)

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5b/v3/MiTP31m6ThuBRn_KVs7sMg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=85E86B1FC298F99A795763CC0C877E1A3DB9C4935CC4C77B44AACC537FD8180F)

mode属性为滑动条样式，可选值为：

*   outset：滑块在滑杆上。
    
*   inset：滑块在滑杆内。
    

#### 绑定事件

向slider组件添加change事件，添加时需要传入ChangeEvent参数。

<!-- 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>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

// 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;
    }
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/20/v3/IzqSL4UOTPqhQCr0tWlkAg/zh-cn_image_0000002594828244.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=58F992F90D2B7D9E379DBBEB00AC81A4745A7AC6111030D6615ABA46A6F2FB59)

#### 场景示例

开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。

<!-- xxx.hml -->
<div class="container">
  <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
  <div class="txt">
    <slider min="0" max="100" value="{{value}}" onchange="setValue"></slider>
    <text>The width of this picture is {{WidthVal}}</text>
    <text>The height of this picture is {{HeightVal}}</text>
  </div>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}
.text{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 65%;
}
.text{
  margin-top: 30px;
}

// xxx.js
export default{
  data: {
    value: 0,
    WidthVal: 200,
    HeightVal: 200
  },
  setValue(e) {
    this.WidthVal = 200 + e.value;
    this.HeightVal = 200 + e.value
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/xYHr6NqpRG2Q78GtWL4a8A/zh-cn_image_0000002625187691.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073321Z&HW-CC-Expire=86400&HW-CC-Sign=B5D6FFA57C9E42B19E30A4FC418EC92B7083BDDC3D0A1337D291675EF479CBEC)