As the name suggests, the most common use of the slider input is when we know the lowest and the highest inputs that can be given as a response. For instance, if we are developing a website that only permits users in the age group 18-40. We can have the birth year as a sliding input range with the lowest value being 1986 and the highest being 1998. The slider input is a highly intuitive user interface that projects itself as an alternative to a plain textbox input or a drop-down with fixed values.
The range input is best when you have calculations associated with it. The flexibility of sliding the controls and seeing the result ‘live’ is unmatchable.
How to create input sliding range element in HTML?
Here is the sample code for creating the input range element:
<input name="weight" type="range" min="100" max="500" step="10" />
Here are the key attributes:
- min (The lowest accepted value in the range)
- max (The highest accepted value in the range)
- step (The increment/decrement step value default is 1)
- value (The starting or default value of the slider)
Displaying the current value
A jQuery Solution to Display values for all range input elements
A more reusable solution would be to create a jquery snippet that handles the change event for all range input elements. Here is the code:
Negative & decimal values in the range input
Yes, you can have negative and decimal values in the range input see below for some examples: