滑块

效果

参数

value

数值

min

设置最小

max

设置最大

step

设置步长

style

设置滑块显示样式

direction

• Axis.Horizontal 横向

• Axis.Vertical 纵向

这是滑块条纵向还是横向

reverse

设置是从反方向还是正方向

属性

showTips

是否显示提示

blockColor

设置滑块的颜色

trackColor

设置滑轨的背景颜色。

selectedColor

设置选中滑轨的颜色

showSteps

是否显示刻度长

事件

onChange

滑动的事件

案例

基础版

@Entry
@Component
struct Index13 {
    @State vInSetValueOne:number = 30

    build() {
      Column(){
        Row(){
          Slider({
            value: this.vInSetValueOne, // 数值
            // 滑块样式 SliderStyle.OutSet 在外面
            // 滑块样式 SliderStyle.InSet 在里面
            // 滑块样式 SliderStyle.NONE 无滑块
            style: SliderStyle.InSet,
            // 方向 横向还是纵向
            direction: Axis.Horizontal,
            reverse: false // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
          })
            .showTips(true)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.vInSetValueOne = value
              console.info('value:' + value + 'mode:' + mode.toString())
            })
        }
      }

    }
}

高级版本

@Entry
@Component
struct Index13 {
    @State vInSetValueOne:number = 30

    build() {
      Column(){
        Row(){
          Slider({
            value: this.vInSetValueOne, // 数值
            // 滑块样式 SliderStyle.OutSet 在外面
            // 滑块样式 SliderStyle.InSet 在里面
            // 滑块样式 SliderStyle.NONE 无滑块
            style: SliderStyle.InSet,
            // 方向 横向还是纵向
            direction: Axis.Horizontal,
            reverse: false // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
          })
            // 是否显示提示
            .showTips(true)
             // 设置滑块的颜色
           .blockColor(Color.Green)
            // 设置 设置滑轨的背景颜色。
            .trackColor(Color.Red)
            // 设置选中滑轨的颜色
             .selectedColor(Color.Orange)
            // 是否显示当前步长刻度
            // 多增加了一条黑线
            .showSteps(true)

            .onChange((value: number, mode: SliderChangeMode) => {
              this.vInSetValueOne = value
              console.info('value:' + value + 'mode:' + mode.toString())
            })
        }
      }

    }
}