3

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>
w3spi
  • 4,380
  • 9
  • 47
  • 80

1 Answers1

5

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/

Jns
  • 3,189
  • 1
  • 18
  • 23
  • awesome, can you help me to display the numbers on the slider for a user? –  Sep 10 '18 at 18:59
  • Apparently there is a possibility to add tickmarks/labels to a range slider. But currently, no browser supports this feature: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Adding_hash_marks_and_labels Probably you have to search for a alternative (third party component - e.g. this one: https://www.npmjs.com/package/bootstrap-slider) – Jns Sep 10 '18 at 19:55
  • but i don't get to show at least `

    {{value}}

    ` on the display.     –  Sep 10 '18 at 20:59
  • Ah okay, I misunderstood that – Jns Sep 11 '18 at 06:25
  • No, that was still useful because I was hoping I could add some nicer UI on the slider, too. –  Sep 11 '18 at 17:53
  • @user9307178 You can use v-range-slider from Vuetify – Denis Feb 22 '22 at 07:21