Einen zugänglichen Bereichsschieberegler mit CSS erstellen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Der Accessibility Trick besteht darin, <input type="range"> zu verwenden und ihn mit CSS in Form zu bringen, anstatt aufzugeben und ihn mit divs oder so neu zu erstellen und später die Barrierefreiheit zu vergessen.

Das raffinierteste Beispiel verwendet einen abgewinkelten linear-gradient-Hintergrund, der die Eingabe wie einen Lautstärkeregler aussehen lässt, wobei links = leise und rechts = laut.