Hat super geholfen, Danke!
Jetzt habe ich die nächste Herausforderung. Es sollen 6 dieser Schieberegler dargestellt werden.
Alle mit unterschiedlichen Farben. Ich habe in die CSS den Style eingearbeitet wie 1 Schieberegler auszusehen hat. Was muss ich ergänzen bzw. verändern, damit jeder Schieberegler andere Farbe bekommt?
So sieht mein Code aus
HTML
<h2 style="padding-top: 100px;">Test Überschrift</h2>
<p>Test Schieberegler Text</p>
<div style="padding-top: 100px;">
<input id="input-for-range" type="text" pattern="[1-9][0-9]*" style="width: 30px;"><br><br>
<input id="range" type="range" min="1" max="100" step="1" style="width: 400px;">
<input type="text" style="width: 200px; height: 50px; margin-left: 20Px;">
<script>
document.getElementById("input-for-range").addEventListener("keyup", function () {
var rng = document.getElementById("range");
if (rng.validity.valid) rng.value = this.value;
}) </script>
</div>
<div style="padding-top: 100px;">
<input id="input-for-range2" type="text" pattern="[1-9][0-9]*" style="width: 30px;"><br><br>
<input id="range2" type="range" min="1" max="100" step="1" style="width: 400px;">
<input type="text" style="width: 200px; height: 50px; margin-left: 20Px;">
<script>
document.getElementById("input-for-range2").addEventListener("keyup", function () {
var rng = document.getElementById("range2");
if (rng.validity.valid) rng.value = this.value;
}) </script>
</div>UND CSS
CSS
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 16px;
cursor: pointer;
animate: 0.2s;
box-shadow: 2px 2px 5px #000000;
background: #27A94A;
border-radius: 5px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 34px;
width: 49px;
border-radius: 6px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -9.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #27A94A;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 16px;
cursor: pointer;
animate: 0.2s;
box-shadow: 2px 2px 5px #000000;
background: #27A94A;
border-radius: 5px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 34px;
width: 49px;
border-radius: 6px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 16px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #27A94A;
border: 0px solid #000000;
border-radius: 10px;
box-shadow: 2px 2px 5px #000000;
}
input[type=range]::-ms-fill-upper {
background: #27A94A;
border: 0px solid #000000;
border-radius: 10px;
box-shadow: 2px 2px 5px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 34px;
width: 49px;
border-radius: 6px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #27A94A;
}
input[type=range]:focus::-ms-fill-upper {
background: #27A94A;
}