Eingabebereich mit geteilten Farben mit CSS

Question

Ist es möglich, einen Eingabebereich so anzupassen, dass er auf der rechten und linken Seite des Trackers nur durch CSS unterschiedliche Farben aufweist? Das ist, was ich bisher bekommen habe.

input[type=range] { 
 
    margin: 10px 0; 
 
    margin: 50px; 
 
    width: 500px; 
 
    background: transparent; 
 
    -webkit-appearance: none; 
 
} 
 

 
input[type=range]::-webkit-slider-runnable-track { 
 
    
 
    height: 10px; 
 
    
 
     background: white; 
 
     border-radius: 5px; 
 
    
 
} 
 

 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    height: 25px; 
 
    width: 25px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    border: 3px green solid; 
 
    margin-top: -7px; 
 
} 
 

 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 

 

 
body { 
 
    background-color: green; 
 
}

<input type="range" min="0" max="10" />

https://jsfiddle.net/Lautaro/k179gwur/1/

Answer 1

Ja, könnten Sie CSS Gradient verwenden.

input[type=range]::-webkit-slider-runnable-track { 
    background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%,#ffffff 100%); 
}