Recommended Range Slider Component?

I’m looking for a range slider that works with VueJS 2.0.


  • I need to be able to pass a start range & end range.
  • It needs to pair with a number input box, allowing for the number to be updated via both an input and/or slider.
  • Slider needs to dynamically update according to the input box & visa versa. All in one component if possible.

Any recommends?

The only one that seemed decent is this one that I just found

I’ve never used it so I cant say how well it is interfacing with it will be but it seems decent enough and the example / live demo page covers some basic use cases.

1 Like

I’m now fighting with it will be appreciated for help.

I’ve started from this

And the link to the plugin was already given.

If you want to set initial range value for the slider, please pass it in the value option as value: [25, 50] in the javascript code.

new Vue( {
el: ‘#app’,
data () {
return {
value: [25, 50],

Sorry for bumping an old post, but i just wanted to share this custom vue slider, that i build, with you guys: Maybe you can get inspired and do something similar in the future. :slight_smile:

It supports custom labels, custom values, that you can use for start/end range.

@bjornnyborg it doesn’t seem to work with vue 3 any ideas why? I would really like to use it. Thanks