HarmonyOS Slider showTips

const BLOCK_DEFAULT_BORDER_WIDTH = 4; 
 
@Entry 
@Component 
struct SliderIndex { 
  @State isTipShow: boolean = false; 
  @State tipsOffset: number = 0; 
  private slideHeight: number = 300; 
  private blockSize: number = 20; 
  private tipHeight: number = 40; 
  private hideTipTask?: number; 
 
  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() { 
    Row() { 
      Slider({ direction: Axis.Vertical, }) 
        .height(this.slideHeight) 
        .selectedColor(Color.Green) 
        .trackColor('#5a5a5a') 
        .trackThickness(10) 
        .blockSize({ width: this.blockSize, height: this.blockSize }) 
        .selectedColor('#FF6103') 
        .onChange((value: number, mode: SliderChangeMode) => { 
          switch (mode) { 
            case SliderChangeMode.Moving: 
            case SliderChangeMode.Click: 
              this.showTip(value); 
              break; 
            case SliderChangeMode.End: 
              this.hideTip(); 
              break; 
          } 
        }) 
      if (this.isTipShow) { 
        Text("i am tip!") 
          .fontSize(12) 
          .height(this.tipHeight) 
          .offset({ y: this.tipsOffset }) 
          .fontColor(Color.White) 
          .backgroundColor("#66000000") 
          .padding(10) 
          .borderRadius(5) 
          .hitTestBehavior(HitTestMode.Transparent) 
      } 
    } 
    .alignItems(VerticalAlign.Top) 
    .padding(20) 
    .height('100%') 
    .width('100%') 
  } 
}