Stil Eingabebereich vor und nach

Question

Ich folgte this method von CSS-Tricks, um einen Eingabebereich zu stylen und versuchte, die Vorher-Nachher-Pseudoklassen zu verwenden. Unten ist der Code, den ich versucht habe:

input[type=range]::-webkit-slider-thumb:before { 
    background: #fff; 
} 

Dies scheint nicht den Trick zu tun. Kann mir jemand helfen, den Slider Track zu stylen? Ich brauche eine reine CSS-Lösung. Im Wesentlichen möchte ich es look like this.

Ich werde auch den Code aus CSS-Tricks einfügen:

input[type=range] { 
    -webkit-appearance: none; 
    margin: 18px 0; 
    width: 100%; 
} 
input[type=range]:focus { 
    outline: none; 
} 
input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    background: #3071a9; 
    border-radius: 1.3px; 
    border: 0.2px solid #010101; 
} 
input[type=range]::-webkit-slider-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    -webkit-appearance: none; 
    margin-top: -14px; 
} 
input[type=range]:focus::-webkit-slider-runnable-track { 
    background: #367ebd; 
} 
input[type=range]::-moz-range-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    background: #3071a9; 
    border-radius: 1.3px; 
    border: 0.2px solid #010101; 
} 
input[type=range]::-moz-range-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 
input[type=range]::-ms-track { 
    width: 100%; 
    height: 8.4px; 
    cursor: pointer; 
    animate: 0.2s; 
    background: transparent; 
    border-color: transparent; 
    border-width: 16px 0; 
    color: transparent; 
} 
input[type=range]::-ms-fill-lower { 
    background: #2a6495; 
    border: 0.2px solid #010101; 
    border-radius: 2.6px; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
} 
input[type=range]::-ms-fill-upper { 
    background: #3071a9; 
    border: 0.2px solid #010101; 
    border-radius: 2.6px; 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
} 
input[type=range]::-ms-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
} 
input[type=range]:focus::-ms-fill-lower { 
    background: #3071a9; 
} 
input[type=range]:focus::-ms-fill-upper { 
    background: #367ebd; 
} 

Answer 1

Bit einer verzögerten Antwort hier:

A reinen CSS-Lösung ist hier nicht möglich, Cross-Browser - IE ist die nur eine, die dies ermöglicht über ::-ms-fill-lower und ::-ms-fill-upper

Für eine vollständige Cross-Browser-Lösung müssen Sie js verwenden. Es gibt hier ein Beispiel, die CSS-Gradienten mit der Eingabe des Wert aktualisiert grob zu tun, was Sie wollen: http://codepen.io/ryanttb/pen/fHyEJ

Sie auch Informationen über die in dieser Antwort auf eine ähnliche Frage finden: Style lower and upper fill in HTML5 range input

Answer 2

Es ist möglich, in Firefox und IE -

// Mozilla  
input[type="range"]::-moz-range-progress { 
    background: #cc1a1a; 
    height: 12px; 
    border-radius: 12px; 
} 
// IE 
input[type="range"]::-ms-fill-lower { 
    background: #CC1A1A; 
    border: 0 solid #000101; 
    border-radius: 50px; 
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; 
} 
input[type="range"]::-ms-fill-upper { 
    background: #c0c0c0; 
    border: 0 solid #000101; 
    border-radius: 50px; 
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d; 
} 

gibt nur einen Weg für Chrome war :before und :after wird nicht mehr unterstützt (seit März 2016). Das beste, was ich gefunden habe - ist http://rangeslider.js.org/. Auch funktioniert es gut mit Angular JS - https://github.com/danielcrisp/angular-rangeslider