Gibt es eine Möglichkeit, den HTML5-Bereich zu steuern?

Question

Gibt es eine Möglichkeit, den HTML5-Bereich zu steuern? Ist es möglich, die Farbe der Linie zu ändern, auf der der Slider gleitet?

Answer 1

Es stellte sich heraus, es in Webkit ist:

input[type="range"]{ 
    -webkit-appearance:none !important; 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
} 

Anschließend können Sie addieren, was Attribute, die Sie zu jedem dieser Selektoren müssen. Hintergrund, Gradient, etc ...

Hoffe, dass hilft!

Answer 2

Ein vollständiges Beispiel für CSS individuell gestaltet werden (in diesem Moment für Webkit):

input[type="range"]{ 
    background: rgb(94, 30, 30); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]:hover{ 
    background: rgb(194, 139, 131); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border:1px solid black; 

    background: #a90329; 
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); 
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=1); 
} 

input[type="range"]::-webkit-slider-thumb:hover{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    background-color:rgb(56, 13, 13); 
    border:1px solid black; 

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); 
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1); 
} 

Answer 3

Am Anfang Antwort sein bereits beschrieben. Ich passe es einfach auf meinen Weg. Werfen Sie einen Blick, es kann Ihnen helfen.

Code unten auf CSS hinzufügen:

input:focus{ 
    outline-color: transparent; 
} 
input[type="range"]{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    height: 6px; 
    background-color: #b6b6b6; 
    outline-color: transparent; 
} 
input::-webkit-slider-thumb{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:16px; 
    height:16px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -ms-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius:10px; 
    background-color: #20b373; 
    overflow: visible; 
} 

Live Demo