How to attach an onchange listener on a noUiSlider

user_12769410 0
Viewed 368

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?

nouislider vue.js javascript
2 Answers

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);
user_121682350

The noUiSlider Library has it's own event listener which can be used in the following way.

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