如何在 noUiSlider 上附加 onchange 侦听器

Question

我的项目中有一个 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>

我需要 Slider in REAL-TIME 的值，@change 侦听器应该可以理想地工作，但它在这里不起作用。是我弄错了还是有其他方法？

Answer 1

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]);
    });
  }
}

Answer 2

你可以使用updateOptions方法...

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

如何在 noUiSlider 上附加 onchange 侦听器

How to attach an onchange listener on a noUiSlider

javascript

nouislider

vue.js