Slider mit Input Elment 1
Im folgenden wird in mehreren Dateien Schritt für Schritt ein Audioplayer mit Javascript und gängigen HTML Elementen erstellt, ohne Javascript-Bibliotheken, sondern schlank, einfach, selbstgemacht.
Auf dieser Seite sieht man, wie man ein input Slider mit CSS gestalten kann.
Die Gestaltung des runden Knopfes ist noch kein CSS Standard. Nutze dazu folgende CSS Pseudo Elemente.
Mozilla ::-moz-range-thumb
Webkit ::-webkit-slider-thumb
HTML
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
CSS
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 200px;
height: 15px;
background: #d3d3d3;
outline: none;
}
.slider:hover {
background: #aaa;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
