一、Slider控件是鸿蒙开发中的滑动条组建，初始化方式

Slider({
    min:0, //最小值
    max:100,//最大值
    value:30,//默认值
    step:10,//步长，每次滑动的差值
    style:SliderStyle.OutSet, //滑块的样式，默认outset
    direction:Axis.Horizontal, //水平方式的滑动条
    reverse:false //是否反向滑动
})

相关初始化属性对应样式如下

其中如果滑块style属性对应的值是inset，那么是

二、其他属性

设置滑动条的高度不能用height，要用trackThickness属性。

小tips：如果不知道需要设置什么，可以通过看官方文档，而且是中文版，真的是遥遥领先，👍

也可以通过showTips值来设置是否有上方的value小提示

Slider({
    min:100,//最小
    max:400,//最大
    value:this.imageWidth,//默认值
    step:10,//滑动的步长
    style:SliderStyle.OutSet,//滑块在滑动条外
    direction:Axis.Horizontal,
    reverse:false
})      
.width('90%')
.trackThickness(8)
.showTips(true)

三、值变化监听

Slider滑动条值改变是通过onChange方法监听的

Slider({
  min:100,//最小
  max:400,//最大
  value:this.imageWidth,//默认值
  step:10,//滑动的步长
  style:SliderStyle.OutSet,//滑块在滑动条外
  direction:Axis.Horizontal,
  reverse:false
})
.width('90%')
.onChange((value,changeMode) => {
     console.log(value.toString())
     this.imageWidth = value
})