组件应用场景: 设备音量大小，调节屏幕亮度等需求

slider组件内options属性简介

value：滑动条当前进度值。
min：设置滑动条设置最小值。
max：设置滑动条设置最大值，默认为 100 。
step：设置滑动条滑动跳动值，当设置相应的 step 时，Slider为间歇滑动。
style：设置滑动条的滑块样式。
direction：设置滑动条滑动方向为水平或竖直方向。
reverse：设置滑动条取值范围是否反向。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Yellow)

slider组件属性简介

blockColor：设置滑块的颜色。
trackColor：设置滑轨的背景颜色。
selectedColor：设置滑轨的已滑动颜色。
showSteps：设置当前是否显示步长刻度值。
showTips：设置滑动时是否显示气泡提示百分比。
trackThickness：设置滑动条粗细。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Orange)
          .blockColor(Color.Red)    // 设置滑块颜色
          .trackColor(Color.Pink)   // 设置滑轨颜色
          .selectedColor(Color.Red) // 设置滑轨的已滑动颜色
          .showSteps(true)          // 设置显示步长
          .showTips(true)           // 设置显示进度
          .trackThickness(5)        // 设置滚动条宽度

slider组件事件介绍

onChange：滑动条滑动时触发事件回调，value 表示当前进度值；mode 表示滑动条的拖动状态(但是实例中无效果)，SliderChangeMode 定义了以下 3 种类型：

Begin：用户开始拖动滑块。
Moving：用户拖动滑块中。
End：用户结束拖动滑块。

代码实例:

Slider({
          value: 10,
          min: 0,
          max: 100,
          step: 1,
          style: SliderStyle.InSet,
          direction: Axis.Horizontal,//水平方向
          reverse: false
        })
          .width(260)
          .height(60)
          .backgroundColor(Color.Brown)
          .blockColor(Color.Red)    // 设置滑块颜色
          .trackColor(Color.Pink)   // 设置滑轨颜色
          .selectedColor(Color.Red) // 设置滑轨的已滑动颜色
          .showSteps(true)          // 设置显示步长
          .showTips(true)           // 设置显示进度
          .trackThickness(5)        // 设置滚动条宽度
          .onChange((value: number, mode: SliderChangeMode) => {
            console.log("当前值:"+value)
          })

运行结果:

注意:Slider 组件支持的通用事件只有 onAppear() 和 onDisAppear() 这俩方法。

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教