Slider kommen an vielen Stellen zum Einsatz, allerdings ließ sich ihr Aussehen meist nicht auf einfachem Wege nur mit CSS anpassen. Stattdessen wurde ein Mix aus Standard-Selektoren und –Properties und prefixed Selektoren und Properties benötigt. Seit der Veröffentlichung von Internet Explorer 10 ist es möglich, Cross-Browser-kompatible Slider nur mit CSS zu generieren. Daniel Stern erklärt, wie Range-Inputs ein benutzerdefinierter Stil verpasst werden kann.

Aussehen von Slidern individuell anpassen

Um das Aussehen von Slidern mit benutzerdefinierten CSS-Styles zu überschreiben, müssen verschiedene Styles auf Range Inputs in allen Browsern angewandt werden, sodass sie als unsichtbare oder ungestylte Range-Inputs vorliegen. Anschließend kann das Aussehen der Slider individuell mit HTML angepasst werden.

So werden zunächst Thumb und Track einzeln wie normale HTML-Elemente angepasst, dann werden beide CSS miteinander kombiniert, um den vollständigen Range-Input zu erstellen. Noch einfacher und vor allem effizienter ist die Nutzung eines Preprozessors, um identische Range-Inputs für jeden Browser zu gestalten.

In seinem Tutorial zur Anpassung von Cross-Browser-kompatiblen Slidern gibt Daniel Stern zudem einige Code-Beispiele, die den Vorgang verdeutlichen. In jedem Fall ist es ein nützliches Tool, um das Aussehen von Range-Inputs mit einfachen Mitteln zu verändern.

Aufmacherbild: Web User Interface Set – Sliders. Colored elements von Shutterstock / Urheberrecht: LittleCuckoo