クロムとmozの垂直スライダ

Question

-mozと-webkitを使用して垂直スライダをスタイリングしています。 mozillaでは、orient = "vertical"を使用して垂直に宣言し、すべてのスタイリングがうまく動作します。 -webkit-appearanceを使用しているので、以来のクロム：なし;スタイリングのために私は-webkit-appearance：slider-verticalを使うことができません。これは私に-webkit-transform：rotate（90deg）;を使用させます。

問題は、mozillaで、高さを使用して、スライダの実際の高さをクロムで回転させて宣言することができます。

#sens[type=range]{ 
    -webkit-appearance: none; 
    height: 220px; //in chrome is width since it is rotated 
} 

どうすれば解決できますか？

Answer 1

私はあなたのようなものが必要だと思います。

まず、::-webkit-slider-runnable-trackと::webkit-slider-thumbについて読む必要があります。 link1およびlink2非常に有用な特性。

そして今、あなたがそのようなことを行うことができます。スライダ縦：あなたは-webkit-外観を使用できない理由

input[type=range] { 
 
    -webkit-appearance: none; 
 
    -webkit-transform: rotate(90deg); 
 
    margin-top: 50px; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 300px; 
 
    height: 5px; 
 
    background: #ccc; 
 
    border: none; 
 
    border-radius: 3px; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    height: 16px; 
 
    width: 16px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    margin-top: -5px; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
    background: #ddd; 
 
}

<input type="range" />