web-dev-qa-db-ja.com

スライダーの前後で異なる色を持つようにHTML5範囲入力をスタイルする方法は？

enter image description here

左側を緑色に、右側を灰色にしたいです。上に示したように完璧です。できれば、純粋なCSSソリューション（WebKitについてのみ心配する必要があります）。

そのようなことは可能ですか？

csshtml5inputwebkit
53
Shamoon

純粋なCSS解決策：

  • Chrome：input[range]、および親指に残されたすべてのスペースを影の色で塗りつぶします。
  • IE：車輪を再発明する必要はありません：::-ms-fill-lower
  • Firefoxホイールを再発明する必要はありません：::-moz-range-progress
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
<input type="range"/>
75
deathangel908

はい、可能です。 input range は、HTML5に追加された新しい要素であり、HTML5はドラフトにすぎない（そして今後も長くなる）ため、すべてのブラウザで実際に適切にサポートされていません。

また、少しのJavaScriptも必要です。簡単にするために、このために jQuery ライブラリを使用する自由を取りました。

ここに行きます： http://jsfiddle.net/JnrvG/1/ 。

31
federico-t

これに対する小さな更新：

以下を使用すると、マウスのリリースではなく、その場で更新されます。

「mousemoveを変更」、「機能」

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>
7
James Parker

以前に受け入れられたソリューションはもう機能していません。

カーソルの前に必要なバーを追加するスタイル付きコンテナにrangeをラップする単純な関数をコーディングすることになりました。 この例 cssで設定された「青」と「オレンジ」の2つの色が見やすいので、すぐに変更できます。

4
fedeghe

受け入れられた答えは理論上は良好ですが、overflow: hiddenによって切り取られない限り、親指がトラックのサイズより大きくなることはできないという事実を無視します。ほんの少しのJSでこれを処理する方法の例については、このcodepenを参照してください。

https://codepen.io/saintwycliffe/pen/VBGYXN

3
dargue3

WebKit、Firefox、およびIEのそれぞれの擬似要素でサポートされるようになりました。しかし、もちろん、それぞれ異なります。 ：（

この質問 の回答を参照するか、いくつかのソリューションについてprettify <input type=range> #101というタイトルのCodePenを検索してください。

0
Wilson F