Progress触摸热区增大demo

@Component 
export struct sliderExample { 
  @State text: string = '哈哈哈' 
  @State value: number = 40; 
  flagValue: number = 0 
  build() { 
    Stack() { 
      Text(this.text).fontSize(20) 
      Row() { 
      } 
      .onClick(() => { 
        this.text = '上方横条onclick' 
      }) 
      .backgroundColor(Color.Orange) 
      .width('100%') 
      .height(24) 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 96 }) 
      Row() { } 
      .onClick(() => { this.text = '下方横条onclick' }) 
      .backgroundColor(Color.Pink) 
      .width('100%') 
      .height(24) 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 48 }) 
      Row() { 
        Slider({ style: SliderStyle.OutSet, value: this.value }) 
          .blockSize({ width: 6, height: 6 }) 
          .blockBorderColor(Color.White) 
          .blockBorderWidth(5) 
          .height(24) 
          .trackThickness(3) 
          .backgroundColor(Color.Red) 
          .onChange((value)=>{ 
            this.value = value 
          }) 
      } 
      .position({ x: 0, y: '100%' }) 
      .markAnchor({ x: 0, y: 72 }) 
      .backgroundColor('rgba(255, 255,255,0.5)') 
      .responseRegion([{ x: 0, y: 0, width: '100%', height: '100%' }, 
        { x: 0, y: '100%', width: '100%', height: '100%' }, 
        { x: 0, y: '-100%', width: '100%', height: '100%' }]) 
      .hitTestBehavior(HitTestMode.Transparent) 
      .gesture( 
        PanGesture(new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })) 
          .onActionStart(() => { 
            this.flagValue = this.value 
          }) 
          .onActionUpdate((event?: GestureEvent) => { 
            if (event) { 
              this.value = this.flagValue + (event.offsetX / 3) 
            } 
          }) 
      ) 
    } 
    .backgroundColor(Color.Green) 
    .width('100%') 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.