Eingabeschieberegler für den vertikalen Bereich: Ausrichtung und Kompatibilität

In der Welt der Webentwicklung kann die vertikale Darstellung von Schiebereglern die Benutzererfahrung verbessern und bestimmte Layouts berücksichtigen . In diesem Artikel werden Techniken zum Erreichen einer vertikalen Ausrichtung mit einem HTML5--Schieberegler unter Berücksichtigung der Browserkompatibilität und der modernen Implementierung untersucht.

Anfangs ging man davon aus, dass eine Anpassung der Höhe und Breite des Schiebereglerelements dies bewirken würde löst in unterstützten Browsern eine automatische vertikale Ausrichtung aus. Tests ergaben jedoch, dass diese Methode nicht mehr zuverlässig ist, sodass Entwickler nach alternativen Lösungen suchen.

Moderner Ansatz

Für aktuelle Versionen von Chrome und Firefox die effizienteste Lösung beinhaltet die Verwendung der Schreibmodus- und Richtungseigenschaften:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

Wenn Sie den Schreibmodus auf „vertikal-lr“ (oder „vertikal-rl“) setzen, wird die Schreibrichtung umgedreht, während „direction: rtl“ (von rechts nach links) sicherstellt, dass durch Schieben nach oben der Wert unter Einhaltung der Standardkonventionen verringert wird.

Unterstützung für ältere Browser

Für ältere Versionen von Chrome und anderen Chromium-basierten Versionen Browser:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

Anwenden von „Erscheinungsbild: Schieberegler-Vertikal“ erzwingt die vertikale Ausrichtung, und das Festlegen einer festen Breite richtet sich nach der in modernen Browsern verwendeten Standardbreite.

Firefox-Kompatibilität

Für ältere Versionen von Firefox:

html {
    orient: vertical;
}

Das Hinzufügen des orient-Attributs zum -Element leitet die vertikale Ausrichtung für alle Schieberegler auf der Seite ein.

Zusammenfassend stellen diese Techniken zuverlässige Methoden zur Anzeige von Schieberegler vertikal, um eine optimale Benutzererfahrung und visuelle Attraktivität in einer Vielzahl von Browsern zu gewährleisten.