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

 
getphphost

One response to “Add a range slider to your form”

  1. Anna says:

    Hello! May be you need help in website development? We can help you. We are web development team with 8+ years of experience. Our portfolio has projects starting from simple one-pagers to complex e-commerce solutions with an intricate back-end logic. Please, confirm the request to find out more.

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.

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