Explore the HTML input “range” attribute – create a custom slider input field

What happend

While working on a image conversion feature, I needed a parameter to control the conversion quality. I wanted to find a way to have a slider that could adjust the quality from, for example, 60% to 100%. So, I decided to search for some inspiration online.

To my surprise, I stumbled upon the built-in “range” type for input fields! I never knew that such a feature existed within the input element. My previous impression of input elements was limited to the commonly used types like text, password, and submit.

Now, let’s explore how to use this “range” type and see how it can be implemented.

Basic Introduction

In addition to the common parameters shared with the input element, the “range” type also has its own additional parameters, which are:

• “list” – Used to display suggested values
• “max” – Maximum value of the range
• “min” – Minimum value of the range
• “step” – Custom step interval for the slider

Let’s try a simple example. If we need a volume adjuster ranging from 1 to 10, we can write it like this:

See the Pen range_1 by story zyra (@story-zyra) on CodePen.

(*音量控制 is the Chinese word for ‘Volume Adjustment‘)

As you can see, we have set the min and max values, which means the input value will be between these two limits.

If the value attribute is not specified, it will default to the middle value between the min and max.

There seems to be something still missing. Besides not being able to see the current value, we should also set the step interval.

After the modifications, it should look like this:

See the Pen range_2 by story zyra (@story-zyra) on CodePen.

Here, we have added an event listener for the input, allowing the text above to dynamically adjust. We have also set the step interval to 1, which is more suitable for volume adjustment.

Additionally, the initial value is set to 6 because (0 + 10) / 2 = 5.5, but since we are using integers, it will be rounded to the nearest integer.

Display the scale

It is close to done, now we need the last steps – displaying the scale.

In order to display the scale, an additional parameter called “list” will be used.

See the Pen range_3 by story zyra (@story-zyra) on CodePen.

When you look at the ‘datalist’ element, you’ll notice that the ‘option’ tags are set with ‘value’ corresponding to the desired range, which then displays the scale.

However, the scale itself is not presented as text. Instead, the labels for the scale are taken from the ‘label’ attribute within the ‘option’ tags. Using CSS with ‘justify-content: space-between‘ ensures that the labels are evenly displayed below the range.

That’s why the example shows the scale as 1, 4, 7, 10, as the intervals are all set to 3, resulting in an even distribution (though you could also write it from 1 to 10, but let’s keep it simple).

Conclusion

Programming is a journey of continuous learning. Despite having around 5 to 6 years of programming experience, I had never used this attribute before.

In situations where resizing is required, it proves to be quite useful and much more user-friendly compared to a simple text box. (Engineers might not always focus on appearance as long as it works, but… users certainly don’t share the same perspective XD)

Reference

• <input type=”range”> – HTML: HyperText Markup Language | MDN (mozilla.org)

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes