如何在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>

我需要实时提供Slider的值，理想情况下，@change侦听器应该可以使用它，但在这里不起作用。 我是在这里犯错误还是有其他方法？

解决方法

您可以使用 urlSession(_ session: URLSession,assetDownloadTask: AVAssetDownloadTask,didFinishDownloadingTo location: URL) 方法...

updateOptions

,

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