Recommended Range Slider Component?

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

Functionality:

  • 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 https://codepen.io/Arredatore/pen/WXpjRz will be appreciated for help.

I’ve started from this https://jsfiddle.net/2xy72dod/167/

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: https://codepen.io/bj-rn-nyborg/pen/PrMzQw 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.

https://element.eleme.io/#/en-US/component/slider#events