HarmonyOS 自定义滑动条

参考示例：

import measure from '@ohos.measure'

const BLOCK_DEFAULT_BORDER_WIDTH = 4;

@Entry
@Component
struct SliderIndex {
  @State isTipShow: boolean = false;
  @State tipsOffset: number = 0;
  @State value: string = '0'
  @State alignContentState: number = 0
  private slideHeight: number = 300;
  private blockSize: number = 50;
  private tipHeight: number = 50;
  private hideTipTask?: number;
  @State SliderChangeMode: SliderChangeMode = SliderChangeMode.Begin
  @State textWidth: number = measure.measureText({
    textContent: this.value + '',
    fontSize: '20px'
  })
  @State toggle: boolean = true
  private showTip(value: number) {
    this.isTipShow = true
    let percent = Number((value / 100).toFixed(2));
    this.tipsOffset = (this.slideHeight - this.blockSize - BLOCK_DEFAULT_BORDER_WIDTH * 2) * percent -
      (this.tipHeight / 2 - (this.blockSize / 2 + BLOCK_DEFAULT_BORDER_WIDTH));
  }

  private hideTip() {
    clearTimeout(this.hideTipTask)
    this.hideTipTask = setTimeout(() => {
      this.isTipShow = false
    }, 3000)
  }

  build() {
    Column() {
      Stack({ alignContent: this.alignContentState === 0 ? Alignment.Center : Alignment.Start }) {
        Slider({ direction: Axis.Horizontal, style: SliderStyle.InSet })
          .width(this.slideHeight)

          .trackColor(Color.Orange)
          .trackThickness(50)
          .blockColor(Color.Blue)
          .blockSize({ width: this.blockSize, height: this.blockSize })
          .selectedColor(Color.White)
          .sliderInteractionMode(SliderInteraction.SLIDE_AND_CLICK)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.value = Number((value).toFixed()).toString()

            if (value > 30) {
              this.alignContentState = 1
            } else {
              this.alignContentState = 0
            }
            switch (mode) {
              case SliderChangeMode.Begin:
                this.SliderChangeMode = SliderChangeMode.Begin;
                this.showTip(value);
                break;
              case SliderChangeMode.Moving:
                this.SliderChangeMode = SliderChangeMode.Moving;
                this.showTip(value);
                break;
              case SliderChangeMode.Click:
                this.SliderChangeMode = SliderChangeMode.Click;
                this.showTip(value);
                break;
              case SliderChangeMode.End:
                this.SliderChangeMode = SliderChangeMode.End;
                this.hideTip();
                break;
            }
          })
        Text() {
          Span('震动幅度')
        }
        .padding({ left: 20 })
      }

      Text(this.value + '')
        .fontSize(20)
        .height(this.tipHeight)
        .width(this.tipHeight)
        .offset({ x: this.tipsOffset, y: -50 })
        .fontColor(Color.Black)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Transparent)
        .borderRadius(25)
        .hitTestBehavior(HitTestMode.Transparent)
        .animation({
          duration: this.SliderChangeMode === SliderChangeMode.Moving ? 50 : 340,
          curve: Curve.FastOutSlowIn,
          iterations: 1,
          playMode: PlayMode.Normal
        })

    }
    .alignItems(HorizontalAlign.Start)
    .padding(20)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}