FirefoxでHTML5のrangeスライダーを垂直方向に表示する方法

FirefoxでHTML5のrangeスライダーを垂直方向に表示する方法

現在では、FirefoxブラウザでもHTML5の input type="range" を縦方向（垂直方向）に表示することが可能です。rangeスライダーは標準では横方向に表示されますが、CSSの変換機能（transform）を活用することで、簡単に縦向きのスライダーを実現できます。

HTMLコード

まず、以下のようなHTMLでrangeスライダーを作成します。

<input type="range" name="range" min="0" max="10" step="1" value="2" />

CSSコード

続いて、スライダーを回転させるためのCSSを適用します。

input[name="range"] {
    position: relative;
    top: 150px;
    width: 200px;
    height: 13px;
    border: 0;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}

コードの解説

ポイントとなるのは transform: rotate(270deg) の部分です。スライダー全体を270度回転させることで、水平方向のスライダーが垂直方向に表示されます。ベンダープレフィックスとして -webkit-（Chrome・Safari向け）と -moz-（Firefox向け）も併せて指定しておくことで、複数のブラウザに対応できます。

また、position: relative と top: 150px を組み合わせることで、回転によって生じる位置のずれを調整しています。回転は要素の中心を基準として行われるため、ページのレイアウトに応じてこれらの値は適宜変更してください。

この手法を使えば、音量コントロールやグラフの縦軸など、縦方向のスライダーが求められるUIを手軽に実装できます。