どうも！LSSです！！
これまで、コード生成ツール カテゴリーなどでよく「スライダー」を使ってきました。
↑こういうやつ。
で、たびたび思っていたんですが…「縦のスライダーって出来ないのかな」と。
例えば「横位置」「縦位置」をスライダーで調整可能にする、といった場面で、横位置はいいとしても縦位置は「縦スライダー」であったほうが直感的に分かりやすいですよね。
ところが、数あるinput部品の中にもその「縦スライダー」が無い。
という事で諦めていたのですが…実に単純な方法で解決できました！
縦スライダー（下から上に）
コード
<div style="height: 200px;">
<input style="transform-origin: 100% 50%; transform: translateX(-200px) rotate(-90deg); width: 200px;" max="100" min="0" type="range" />
</div>
縦スライダー（上から下に）
コード
<div style="height: 200px;">
<input style="transform-origin: 0% 50%; transform: rotate(90deg); width: 200px;" max="100" min="0" type="range" />
</div>
transform:rotateで回転させるだけの簡単なお仕事
はい。
「横になっているものを縦にする」ので、単に回転させればよいだけの話でしたｗ
コード中で「200」となっているのは「スライダーの表示幅（じゃなくて高さ）」で、変更する場合は合わせて変更が必要となります。
rotateで回転させるだけ…なのですが、位置合わせのために transform-origin や translateX を設定しています。
また、続く要素が重ならないようにdivタグで囲み、そこに height をスライダーの高さ分確保している、というコードになります。
いやぁ…rotateも今まで散々使っていたのに、この方法に今まで気づかなかったとは^^;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
