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: