Javascript 如何在noUiSlider上附加onchange侦听器

我的项目中有一个noUiSlider，我有一个

@click

侦听器

<template>
  <div ref="slider" @click="getSliderVal()"></div>
</template>

<script>
import noUiSlider from 'nouislider';
import 'nouislider/distribute/nouislider.css';

export default {
  mounted() {
    noUiSlider.create(this.$refs['slider'], {       
      start: [0],
      connect: true,
      range: {
        'min': -1,
        'max': 1
      }
    })
  },    
  methods: {
    getSliderVal(){
      let a = this.$refs['slider'].noUiSlider.get()
      console.log(a)
    }
  }
}
</script>

从“noUiSlider”导入noUiSlider；
导入'nouislider/distribute/nouislider.css'；
导出默认值{
安装的（）{
create（this.$refs['slider']，{
开始：[0]，
连接：是的，
范围：{
“min”：-1，
“最大”：1
}
})
},    
方法：{
getSliderVal（）{
设a=this.$refs['slider'].noUiSlider.get（）
控制台日志（a）
}
}
}

我需要滑块的实时值，

@change

侦听器在理想情况下应该可以工作，但它在这里不工作。

---

我在这里犯了错误还是有其他方法？

noUiSlider库有自己的事件监听器，可按以下方式使用

<template>
  <div ref="slider" @click="getSliderVal()" style="height: 300px"></div>
</template>

<script>
import noUiSlider from 'nouislider';
import 'nouislider/distribute/nouislider.css';

export default {
  mounted() {
    noUiSlider.create(this.$refs['slider'], {       
      start: [0],
      connect: true,
      tooltips: [true],
      range: {
        'min': -1,
        'max': 1
      }
    })
  },    
  methods: {
    this.$refs['slider'].noUiSlider.on('update', function (values, handle) {
      console.log(values[handle]);
    });
  }
}

从“noUiSlider”导入noUiSlider；
导入'nouislider/distribute/nouislider.css'；
导出默认值{
安装的（）{
create（this.$refs['slider']，{
开始：[0]，
连接：是的，
工具提示：[true]，
范围：{
“min”：-1，
“最大”：1
}
})
},    
方法：{
this.$refs['slider'].noUiSlider.on（'update'，函数（值，句柄）{
log（值[handle]）；
});
}
}

您可以使用

更新选项

方法

await this.slider_.noUiSlider.updateOptions({
    start: [that.startTime, that.endTime],
    range: {
      'min': 0,
      'max': Math.round(this.duration * 100) / 100
    }
  }, true);