# 使用Slider时如何判断点击的是滑块还是进度条

#### 问题现象

点击滑块希望可以控制暂停或者恢复播放，需要判断点击的是滑块还是进度条。

#### 效果预览

#### 背景知识

*   Slider：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
*   SliderChangeMode：滑块的状态值。Slider拖动或点击时触发onChange后可获取，包括按下、拖动、离开以及点击滑动条。

#### 解决方案

在Slider中，点击滑块如果没有发生滑动，滑动条进度值是不会发生变化的。而点击滑轨会改变滑块位置，同时也会让滑动条进度产生变化。所以可以通过Slider的onChange事件，在滑动条中按下时判断滑动进度值是否和上一次一致，可以知道点击的是滑动条还是滑块。方案如下：

1.  通过onChange事件获取用户按下时滑动条的值value。
2.  根据按下前滑动条的值lastValue和按下时滑动条的值value进行判断，如果值一致说明用户点击了滑块，不一致则是点击了滑动条。
3.  用户离开滑动条时将离开时的值赋值给lastValue。

```
// 完整代码示例
@Entry
@Component
struct SliderClickDetector {
  @State value: number = 30; // 初始值
  lastValue: number = 30; // 记录上一次滑动条的值
  @State sliderState: string = ''; // 滑块状态

  build() {
    Column() {
      // 显示当前进度条值
      Text(`点击位置: ${this.value.toFixed(0)}%`)
        .fontSize(20)
        .margin(20)
      // 核心Slider组件
      Slider({
        value: $$this.value,
        min: 0,
        max: 100,
        step: 1,
        style: SliderStyle.OutSet // 使用凸起样式
      })
        .width('90%') // 设置Slider宽度
        .onChange((value, mode) => {
          if (mode === SliderChangeMode.Begin) {
            if (value === this.lastValue) {
              this.sliderState = '点击滑块';
            } else {
              this.sliderState = '点击滑动条';
            }
          }
          if (mode === SliderChangeMode.End) {
            this.lastValue = value;
          }
        })
      Text(`点击位置: ${this.sliderState}`)
        .fontSize(16)
        .margin(15)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
```