So erstellen Sie einen benutzerdefinierten Bereichsschieberegler mit CSS

reines CSS erstellt coole Sliders: Kein JavaScript erforderlich, beide Barrierefreiheit

Dieser Artikel zeigt, wie benutzerdefinierte Bereichs -Sliders nur CSS und native HTML -Elemente erstellen, ohne sich auf JavaScript zu verlassen und gleichzeitig die Zugänglichkeit zu gewährleisten. Tutorials decken Möglichkeiten zum Anpassen von Eingabelementen ab, einschließlich des Zurücksetzens und Deaktivierens von Browser -Standardstilen, das Einstellen von Schieberegleitern und das Erstellen von Gleitgradienteneffekten mithilfe von <input type="range">. Darüber hinaus wird erläutert, wie subtile Animationen hinzugefügt werden, um die Benutzerinteraktion zu verbessern, z. Diese Technologie behält native Funktionen bei und unterstützt die Tastaturnavigation und bietet eine vielseitige und einfach zugängliche Lösung für benutzerdefinierte Reichweite. border-image

Schlüsselpunkte:

Erstellen Sie mit reinem CSS und nativem HTML -Elementen einen benutzerdefinierten SCOPE -Schieberegler.
• Das Tutorial <input type="range"> enthält Schritte zum Anpassen von Eingabelementen: BREABEN UND DESSALTIGEN BROWERER -Standardstile, Setzen Sie die Schieberegelstile und erstellen Sie mit
.
• border-image Fügen Sie subtile Animationen hinzu, um das Benutzererlebnis zu verbessern, z. B. das Ändern der Schiebereglastform beim Klicken und das Ändern der Farbe, wenn Sie schwebten.
• Behalten Sie die native Funktionalität und unterstützen Sie die Tastaturnavigation, um die Zugänglichkeit zu gewährleisten.
Der Standard -Slider -Stil ist nicht schön. Die folgende Abbildung zeigt den Anzeigeeffekt des Standardbereichs Slider in Chrom-, Firefox- und Safari -Browsern:

Elemente sind jedoch schwer zu stylen. Die meisten Online -Lösungen basieren auf JavaScript und ausführlichem Code. Schlimmer noch, einige Technologien können auch die Zugänglichkeit von Elementen zerstören. Lassen Sie uns also sehen, wie Sie reine CSS besser nutzen können, um die Zugänglichkeit zu beeinflussen. Die folgende CodePen -Demonstration zeigt, was wir erstellen werden:

CodePen Link <input type="range">

Struktur des Bereichs Eingangselement

analysieren wir zuerst die Struktur des Bereichseingangselements. Es ist ein natives Element und jeder Browser hat seine eigene Implementierung. Es gibt zwei Hauptimplementierungen: eine für Webkit- und Blink -Browser (wie Chrome, Edge, Safari und Opera):

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

ein anderer für Firefox:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

IE hat auch eine dritte Implementierung, aber zum Glück ist dieser Browser jetzt fast weg! Diese Inkonsistenz zwischen Browsern erschwert die Aufgaben, da wir für jede Implementierung unterschiedliche Stile bereitstellen müssen. Ich werde nicht ausführlich darauf eingehen, da dieser Beitrag niemals fertig sein wird, aber ich empfehle dringend, diesen Beitrag von Ana Tudor für eine eingehendere Erkundung zu lesen (Post-Links sollten hier eingefügt werden). Sie müssen sich nur daran erinnern, dass der "Slider" (Daumen), unabhängig von der Implementierung, immer eine gemeinsame Komponente ist.

Ich werde dieses Element nur stylen, wodurch mein benutzerdefinierter SCOPE -Schieberegler einfach anpassen kann. Lassen Sie uns direkt in den Code springen und sehen, was erstaunlich ist.

benutzerdefiniertes Eingangselement

Der erste Schritt besteht darin, appearance: none und einige andere gemeinsame Eigenschaften zum Zurücksetzen und Deaktivieren aller Browser -Standardstile zu verwenden:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

In komplexeren Fällen müssen wir möglicherweise mehr Code hinzufügen, wenn andere Standardstile auf unsere Elemente angewendet werden. Stellen Sie einfach sicher, dass wir ein "nacktes" Element ohne visuellen Stil haben. Definieren wir auch einige CSS

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

In diesem Schritt sind nur der Schieberegler und sein Standardstil sichtbar.

Stellen Sie den Slider -Element -Stil fest

, lass uns das Slider -Element stylen. Wir beginnen mit den grundlegenden Einstellungen:

<code class="language-css">input {
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

Verwenden Sie einige magische Effekte border-image hinzufügen

Jetzt werden wir einen magischen CSS -Trick verwenden, um unseren Schieberegler zu vervollständigen. Es beinhaltet die Verwendung von

: border-image

<code class="language-css">input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

Die Halluzination ist perfekt durch Hinzufügen

zum Eingabeelement und die Verwendung größerer Werte. overflow: hidden

Fügen Sie einige Animationen hinzu

Können wir einige subtile Animationen hinzufügen, wenn wir mit dem Schieberegler interagieren? Es erfordert nicht viel Code und verbessert den UX des Schiebereglers. Zunächst konvertieren wir den Schieberegler aus einem Randkreis in einen vollständigen Kreis, wenn wir klicken. Dazu fügen wir den

-Wert von box-shadow hinzu. spread

Schlussfolgerung

Wir haben es getan und müssen uns nicht mit komplexen Browser-Implementierungen befassen! Wir haben den Selektor für das Slider -Element identifiziert und einige CSS -Tricks verwendet, um den gesamten Bereich der Schieberegler zu stylen. Vergessen Sie nicht, wir verwenden nur das

Element, daher müssen wir uns keine Sorgen um Barrierefreiheitsprobleme machen, da wir die nativen Funktionen aufbewahren. Der Schieberegler unterstützt die Tastaturnavigation ohne Probleme. Hier sind weitere Beispiele für Schieberegler, die mit derselben Technik erstellt wurden: <input type="range"> CodePen Link

codePen Link

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen benutzerdefinierten Bereichsschieberegler mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!