範囲入力スライダーを垂直に表示する方法

Question 1

<input type="range" />スライダーコントロールを縦に表示したい。私が関心を持っているのは、範囲スライダーコントロールをサポートするブラウザーだけです。

幅よりも高さを設定するとブラウザの向きが自動的に変更されることを示すと思われるコメントや参照を見つけましたが、私のテストでは~~、Opera~~でのみ~~機能し~~、Operaでは機能しなくなりました。HTML5範囲スライダーを垂直方向に向けるにはどうすればよいですか？

Question 2

まず、高さを幅よりも大きく設定します。理論的には、これで十分です。HTML5仕様は限り示唆します：

... UAは、スタイルシートで指定された高さと幅のプロパティの比率からコントロールの方向を決定しました。

Operaはこの方法で実装していましたが、Operaは現在~~WebKit~~ Blinkを使用~~してい~~ます。現在のところ、幅よりも高さだけに基づく垂直スライダーを実装しているブラウザーはありません。

いずれにしても、ブラウザー間でレイアウトを正しくするには、幅よりも高さを高く設定する必要があります。左と右のパディングを適用すると、レイアウトと配置にも役立ちます。

Chromeの場合はを使用します-webkit-appearance: slider-vertical。

IEの場合はを使用しますwriting-mode: bt-lr。

Firefoxの場合orient="vertical"、htmlに属性を追加します。彼らがこのようにそれをしたのは残念だ。ビジュアルスタイルは、HTMLではなくCSSを介して制御する必要があります。

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

スニペットを展開

免責事項：

このソリューションは、未定義または未確定のCSSプロパティの現在のブラウザー実装に基づいています。コードで使用する場合は、新しいブラウザーバージョンがリリースされ、w3cの推奨事項が完了したときにコードを調整できるように準備してください。

MDNには-webkit-appearance、Web での使用に対する明示的な警告が含まれています。

このプロパティはWebサイトでは使用しないでください。非標準であるだけでなく、ブラウザごとに動作が異なります。キーワードでさえ、none異なるブラウザの各フォーム要素で同じ動作をするわけではなく、まったくサポートしていないものもあります。

IEドキュメントの垂直スライダーデモのキャプションは、高さを幅より大きく設定すると、範囲スライダーが垂直に表示されることを誤って示していますが、これは機能しません。コードセクションは、はっきり高さまたは幅を設定せず、代わりに使用しますwriting-mode。IEで実装されているこのwriting-modeプロパティは非常に堅牢です。残念なことに、この執筆時点での仕様の現在の草案で定義されている値は、はるかに制限されています。IEの将来のバージョンで、現在提案されている（と同等）のサポートが廃止された場合、スライダーは上下逆に表示されます。おそらく、将来のバージョンでは、bt-lrvertical-lrtb-lrwriting-mode既存の値のサポートを削除するのではなく、新しい値を受け入れる。しかし、あなたが何を扱っているかを知るのは良いことです。

Question 3

これはcss変換を使用して行うことができますが、コンテナの高さと幅には注意してください。また、下に配置する必要がある場合があります。

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

スニペットを展開

または同等の3D変換：

input[type="range"] {
   transform: rotateZ(270deg);
}

これを使用して、スライドを水平または垂直にそれぞれ180度または90度に設定して、スライドの方向を切り替えることもできます。

Question 4

絶対位置に変更せずに、以下を参照してください。これは最近のすべてのブラウザもサポートしています。

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

スニペットを展開

非常に古いブラウザでは-sand-transform: rotate(10deg);、CSSサンドペーパーから使用できます

または使用

-ms-transform: rotate(270deg);IE9 などのプレフィックスセレクタ

Question 5

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

スニペットを展開

ソース：http : //twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Question 6

とてもシンプルです。私はを使用して実装し-webkit-appearance: slider-verticalましたが、chorme、Firefox、Edgeで動作しました

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}