Input range with two different values

Question

I was wondering if it already exists a way to have an input of type "range" with two different setteable values. The input I would like to achieve is something like this. The idea would be to set a range for a price. Meaning I would need to retrieve the "minimum" and the "maximum" from that input. Obviously, for the sake of learning, we can disregard the CSS style.

Is there a way to accomplish this with HTML5 or JavaScript? I've heard that there are some jQuery plugins that accomplish this, but I was wondering if there's a more "native" way of doing it. As an addition, I'm working with the mobile-oriented framework Ionic. If anybody knows about a plugin for Ionic that can achieve this, it would be much appreciated.

vpedrosa · Accepted Answer · 2015-11-18 21:07:18Z

You can use noUiSlider. It includes all Javascript, CSS and HTML necessary.

Having a div like this in your HTML:

<div id="slider"></div>

And using this:

var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } });

You can see an easy example of it working.

Collectives™ on Stack Overflow

Input range with two different values

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related