CODEWITHSUNDEEP
htmlvue.jsinputslidervuejs3
NHQue
NHQue

Reputation: 73

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:

<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>

Upvotes: 0

Views: 3775

Answers (1)

Emīls Gulbis
Emīls Gulbis

Reputation: 2070

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="https://unpkg.com/[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>

Upvotes: 2

Related Questions