Я хочу обновить значение после перетаскивания ползунка.
Это мой код
<div id="app">
<vue-range-slider v-model="rangeSlider" v-bind="options"></vue-range-slider>
<p class="mt-50">Value: {{ value }}</p>
</div>
let app = new Vue({
el: '#app',
data() {
return {
value: 0,
rangeSlider: 0,
options: {
eventType: 'auto',
width: 'auto',
height: 5,
dotSize: 16,
min: 0,
max: 50,
interval: 1,
show: true,
speed: 1,
tooltipDir: 'bottom',
}
}
},
computed: {
rangeChange () {
let range = this.rangeSlider;
if (range > 0 && range <= 20) {
return this.value = 4;
}
if (range > 20 && range <= 30) {
return this.value = 5;
}
if (range > 30 && range <= 40) {
return this.value = 6;
}
if (range > 40 && range <= 50) {
return this.value = 7;
}
}
}
})
Я создал rangeChange()
для вычисления value
, но после Перетаскивая ползунок, value
не обновляется. Вы можете увидеть больше здесь: https://codepen.io/LinhNT/pen/KKpNeva
Я использую этот бегунок диапазона vue: https://github.com/xwpongithub/vue-range-slider
Как я могу это исправить