getphphost

Add a range slider to your form

Posted by

 
 
Scripting

Mon, Oct 2nd, 2017 @ 9:57:20 AM - 

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

 
 

Related Posts

Posted in scripting,promotions

GETPHPHOST Easter promo
 

Leave a Reply

Your email address will not be published. Required fields are marked *

Login

Have an account?

Log in or sign up! It’s fast & free!

Register for this site!

Sign up now for the good stuff.

Lose something?

Enter your username or email to reset your password.

getphphost

Tech Magazine is Stephen Fry proof thanks to caching by WP Super Cache