Creating a Right-to-Left Slider (input type=”range”) in HTML

Table of contents

The purpose

In HTML, you can easily create a slider by writing the following code.

<input type="range">

However, this slider is fixed as left-to-right (where the left is a smaller value and the right is a larger value).

Due to UX considerations, there are times when we absolutely need it to be right-to-left.

This article will introduce a simple method to achieve a right-to-left slider.

The implementation simply involves setting scale: -1; as shown below.

This makes it right-to-left.

Not only does the appearance change, but the right side also becomes the minimum value, and the left side becomes the maximum value.

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

Example：

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