I am currently utilizing the npm package vue-range-component to adjust values via a slider, which then dynamically updates in the input field.
However, I'm encountering an issue with applying the onChange event for inputs. I need to have the ability to manually change the value in the input field, such as entering the number 70, and have that value reflected in the vue-range-component.
You can find my sandbox code here.
https://i.sstatic.net/U6gux.jpg
<template>
<div class="app-content">
<div>
<input type="text" v-model="value[0]" />
<input type="text" v-model="value[1]" />
</div>
<vue-range-slider
v-model="value"
:min="min"
:max="max"
:formatter="formatter"
style="margin-top: 40px"
></vue-range-slider>
<div class="multi-range-value-container">
<p>{{ value[0] }}</p>
<p>{{ value[1] }}</p>
</div>
</div>
</template>
<script>
import "vue-range-component/dist/vue-range-slider.css";
import VueRangeSlider from "vue-range-component";
export default {
data() {
return {
value: [0, 100],
};
},
methods: {
onChange(event) {
console.log(event.target.value);
},
},
components: {
VueRangeSlider,
},
created() {
this.min = 0;
this.max = 1000;
this.formatter = (value) => `$${value}`;
},
};
</script>