HarmonyOS NEXT Practical: Sliding Bar

Goal: Implement horizontal and vertical sliding bars

Slider slider component, commonly used for quickly adjusting settings such as volume and brightness adjustments in various application scenarios.

Knowledge points:
SliderOptions object properties
-Value: Current progress value. Default value: Consistent with the value of parameter min. Starting from API version 10, this parameter supports bidirectional variable binding. Value range: [min, max]。 When it is less than min, take min; when it is greater than max, take max.
-Min: Set the minimum value. Default value: 0
-Max: Set the maximum value. Default value: 100. Explanation: In case of min>=max abnormal situation, min takes the default value of 0 and max takes the default value of 100. If the value is not within the range of [min, max], take min or max, take min near min, and take max near max.
-Step: Set the slider sliding step size. Default value: 1. Value range: [0.01, max - min]。 Explanation: If the set step value is less than 0 or greater than the max value, it will be displayed according to the default value.
-Style: Set the slider and slide display style of the slider. Default value: SliderStyle.OutSet
-Direction: Set the sliding direction of the slider to horizontal or vertical. Default value: Axis.Horizontal
-Reverse: Set whether the value range of the slider is reversed. Default value: false。 When the value is true, the horizontal slider slides from right to left, and the vertical slider slides from bottom to top. When the value is false, the horizontal slider slides from left to right and the vertical slider slides from top to bottom

Component Properties

blockColor(value: ResourceColor)

Set the color of the slider. Default value:$ r('sys.color.ohos_id_color_foreground_contrary')
When the slider shape is set to SliderBlockType When DEFAULT, blockColor can be set to the default circular slider color.
When the slider shape is set to SliderBlockType When IMAGE, the slider is not filled, and setting blockColor does not take effect.
When the slider shape is set to SliderBlockType When SHAPE, blockColor can be used to set the fill color for custom shapes.

trackColor(value: ResourceColor | LinearGradient)

Set the background color of the slide rail. Explanation: When setting a gradient color, if the color breakpoint color value is an illegal value or the gradient breakpoint is empty, the gradient color will not have an effect. Default value:$ r('sys.color.ohos_id_color_component_normal')。 The LinearGradient type in this interface is not supported for use in meta services.

selectedColor(value: ResourceColor)

Set the color of the slid part of the slide rail. Default value:$r('sys.color.ohos_id_color_emphasize')

showSteps(value: boolean)

Set whether the current step size scale value is displayed. Display the scale value when the value is true, and do not display the scale value when the value is false. Default value: false

Actual combat:SliderPage

@Entry
@Component
struct SliderPage {
  @State outSetValueOne: number = 40
  @State vInSetValueOne: number = 40

  build() {
    Column({ space: 10 }) {
      Text('Slider实战')
      Text('横向滑动条')
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('竖向滑动条')
      Slider({
        value: this.vInSetValueOne,
        style: SliderStyle.InSet,
        direction: Axis.Vertical,
        reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
      })
        .showTips(true)
        .height(300)
        .onChange((value: number, mode: SliderChangeMode) => {
          this.vInSetValueOne = value
          console.info('value:' + value + 'mode:' + mode.toString())
        })
    }.width('100%')
  }
}