How to attach an onchange listener on a noUiSlider

Question

I have a noUiSlider in my Project for which I have an @click listener.

<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>

I need the value of the Slider in REAL-TIME for which an @change listener should ideally work but it's not working here. Am I making a mistake here or is there an alternative way?

Answer 1

You can use updateOptions method...

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