Create a right-to-left slider (input type=”range”) in HTML.

Things I want to do

You can easily create a slider in HTML by writing the following code.

<input type="range">

However, this slider is fixed from left to right. (Left represents a smaller value, and right represents a larger value.)

However, for UX reasons, there are times when we absolutely need to go from right to left.

This article will show you an easy way to change something from right to left.

The implementation is simply to set scale:-1 as follows.

This changes the direction from right to left.

Not only does it look different, but the right side represents the minimum value and the left side represents the maximum value.

<input type="range" style="scale:-1">

Example:

I was able to create a right-to-left slider.