は、私がここから範囲スライダを使用していmaterializecss

Question

で範囲スライダの色を変更する：http://materializecss.com/forms.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script> 
 

 
<form action="#"> 
 
    <p class="range-field"> 
 
     <input type="range" id="test5" min="0" max="100" /> 
 
    </p> 
 
    </form>

そして私はポップ「親指」の色を変更するために管理しました

input[type=range]+.thumb{ 
    background-color: #400090; 
} 

通常、私はクロムの要素を調べて、どのようなクラスを取得することができますか？その色を変えるために変更する。いくつかの理由から、私はどのように色を変更するために追加する必要があるクラスを見つけるためにスライダの "ドット"を調べるかを理解することはできません。

Answer 1

これは、私がスライダのドットと親指のバブルの色を変更したものです。

スクリーンショットや入力のための

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script> 
 

 
<style> 
 

 
    input[type=range]::-webkit-slider-thumb { 
 
    background-color: red; 
 
    } 
 
    input[type=range]::-moz-range-thumb { 
 
    background-color: red; 
 
    } 
 
    input[type=range]::-ms-thumb { 
 
    background-color: red; 
 
    } 
 

 
    /***** These are to edit the thumb and the text inside the thumb *****/ 
 
    input[type=range] + .thumb { 
 
    background-color: #dedede; 
 
    } 
 
    input[type=range] + .thumb.active .value { 
 
    color: red; 
 
    } 
 
</style> 
 
<form action="#"> 
 
    <p class="range-field"> 
 
    <input type="range" id="test5" min="0" max="100" /> 
 
    </p> 
 
</form>

Answer 2

これを理解する最も簡単な方法は、実際にソースコードを調べることです。 Githubの833行にここに（https://github.com/Dogfalo/materialize/blob/master/forms.html）、ここに（https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss）がホストされています。これと私のクロームデベロッパーツール間

は、私はこのCSS宣言で＃4286f4（あなた色の代用）までの範囲の入力の背景を変更するために管理している：

.noUI-connect { 
    background: #4286f4 ; 
} 

あなたが使用する必要があります！プロパティ上重要なフラグ。これにより、2つの.thumb要素の間のスライダの色が変更されます。

がスライダーにはほとんど「親指」の色を変更するには：

：あなたは、バックグラウンド（選択の外側の領域）のグレー色を変更したい場合

.range-label{ 
    background-color: desired-color; 
} 

を、これを使用

.noUI-background { 
    background: desired-color; 
} 

追加の警告：このソリューションはnoUiSliderの実装でのみテストされました：http://materializecss.com/forms.html（範囲セクションにスクロール）。私はプレーンなHTMLレンジ要素でこれをテストしておらず、残念ながら仕事に戻る必要があります。

EDIT： プレーンhtml範囲の入力で解決策を試したところ、スライダに.thumbの子としてタグ "value"があるように見えます。残念ながら、これをスタイリングすることはどこにも導かれておらず、これは：/：after CSSプロパティの前にあるか、または最初の段落の2番目のリンクの73〜83行目の間にあると信じています。