• US: +1 347 223 5853   UK: +44 20 8 1234 790
  • Live Chat

Add a range slider to your form

  •  admin
  •  Oct 2, 2017

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

admin

Other posts by

Today i’m going to take a look at hostgator, a web hosting company that has been in…. Ons ervaren team van permanente visagisten in rotterdam heeft de vaardigheden en kennis om u de beste resultaten te geven.