CODEWITHSUNDEEP
formsvue.jssliderrangeslider
user9307178
user9307178

Reputation:

Vue.js range slider, set v-model and get changes

I am putting a slider on my web form for users to enter how much they would like to rate a certain thing.

enter image description here

I am using Vue.js and I am not sure how to set up a v-model on this and how to get user's entered value.

<div v-else class="form-group">
    <form action="">
        <label for="formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
        <input type="range" class="form-control-range" id="formControlRange">
    </form>
<div>

Upvotes: 4

Views: 15998

Answers (1)

Jns
Jns

Reputation: 3257

You just have to add the v-model attribute to your range input: 

<input type="range" class="form-control-range" id="formControlRange" v-model="value">

And define value (however you want to name it) in your component.

...
data: {
  value: 50 //initial value
}

Example: http://jsfiddle.net/q0Lmv196/

Upvotes: 4

Related Questions