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

Question

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

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>

Answer 1

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/