Unless you only need a single slider the easiest range slider in use is the “noUiSlider”. It is jquery independent so that you only need 2 files + 1 format file if you want to change the format of your numbers.

Why would you need a double range slider?

Double range sliders are used in forms when you want to give your clients or visitors the option to choose a minimum and maximum value between the range for both extremes.
For instance, within the range of all prices in your store, your visitor can choose his own wished minimum and maximum price.

Simplest solution for a single slider

If you don’t know this input yet for forms just try out:

<form><input max=”100″ min=”0″ type=”range”></form>

And you get:

(Move the handle to see it work.)

Unfortunately, with HTML you can only construct a single range slider and you have to use an alternative if you want to introduce a double range slider. There are many possibilities among which noUiSlider is the simplest.

Which method to use for forms?

You can find all documentation and links to the download of noUiSlider on refreshless.com/nouislider. Read through the examples and try to make a slider of the one that uses a text input.
For the format of numbers download wNumb and include it n your page as well as the other JS and CSS files. The rest goes as any other input.

An example of noUiSlider