Update Range Input in Vue. Js 3
How Can I Update or Show the Actual Value of a Range Input in Vue 3? I Thought It Would Be Possible Wiht v-Model Like This: Value: {{ Value }} M 1 Answer It...
How can I update or show the actual value of a range input in Vue 3?
I thought it would be possible wiht v-model like this:
<input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/>
<label for="rangeSlider" class="sliderValue">
Value: {{ value }} m
</label>
1 Answer
It actually works exactly the same as the Vue2, just a little bit different Vue setup
const app = Vue.createApp({
data: () => ({
value: 0
})
})
const vm = app.mount('#app')<script src="[email protected]/dist/vue.global.js"></script>
<div id="app">
<input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/>
<label for="rangeSlider" class="sliderValue">
Value: {{ value }} m
</label>
</div>Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
