HTMLで右→左のスライダ（input type=”range”）を作成

やりたいこと

HTMLでは以下のように記載することで簡単にスライダを作成できます。

<input type="range">

ただしこのスライダは左→右固定です。（左が小さい値で、右が大きい値。）

しかしUXの関係でどうしても右→左にしたいことがあります。

この記事では簡単に右→左にする方法を紹介します。

実装

実装は以下のようにscale:-1を設定するだけです。

これにより右→左になります。

見た目だけでなく右側が最小の値になり、左側が最大の値になります。

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

実行例：

結果

右→左のスライダーを作成することができました。