Bereichsschieberegler im Markendesign

Webfunktionen: accent-color <input type="range"> appearance progress() attr() :dir()

Native Bereichseingabe verwenden

Verwenden Sie ein mit einem Label versehenes <input type="range">-Element, anstatt einen Schieberegler mit <div>-Elementen oder benutzerdefinierten Zeiger-Handlern neu zu erstellen. Das native Steuerelement behält die Tastatur- und Zeigerinteraktion, das Touchverhalten und die Unterstützung für Bedienungshilfen bei. Konfigurieren Sie min, max, step und value für den Anwendungsfall.

<label for="range-slider">Volume</label>
<input type="range" id="range-slider" value="70"/>

Wenn für den Wert ein formatiertes Label oder eine Einheit erforderlich ist, stellen Sie ihn in gewöhnlichem DOM-Inhalt dar und aktualisieren Sie aria-valuetext, wenn sich der Wert ändert. Verwenden Sie ::before oder ::after nicht für Schieberegler-Pseudoelemente, da generierte Inhalte in Formularsteuerelementen nicht interoperabel sind. Wenn ein Tooltip erforderlich ist, der dem Schieberegler folgt, verankern Sie ihn mit der CSS-Ankerpositionierung am Schieberegler. Informationen zu Tooltips, die beim Umdrehen richtig ausgerichtet bleiben, finden Sie unter Positionsabhängige Tooltips.

Stilansatz auswählen

Für eine einfache Farbanpassung können Sie markenkonsistente Formulare verwenden und das native Rendering des Browsers beibehalten:

input[type="range"] {
  accent-color: var(--brand-color);
}

accent-color ist keine vollständige API für das Slider-Styling. Die Auswirkung auf den Schieberegler, die Spur und die Füllung hängt vom User-Agent ab. Verwenden Sie die folgenden Pseudoelemente, wenn Sie die Spur, den Schieberegler, die Abmessungen, die Form oder die Füllung steuern müssen.

Track und Thumb gestalten

Setzen Sie das Standard-Betriebssystem-Styling mit appearance: none, margin: 0 und border: 0 zurück. Um das browserübergreifende Rendering zu normalisieren, deklarieren Sie WebKit- und Firefox-Pseudoelemente in separaten Regelblöcken und zentrieren Sie den WebKit-Ziehpunkt mit margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2) (Firefox zentriert den Ziehpunkt automatisch). Behalten Sie für Nutzer sichtbare Werte als benutzerdefinierte Eigenschaften für die Eingabe bei, damit Designs nicht direkt auf Pseudoelemente abzielen.

input[type="range"] {
  --slider-track-size: 0.5rem;
  --slider-thumb-size: 1.25rem;
  --slider-track-radius: 999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: #d9d9d9;
  --slider-fill-color: #06c;
  --slider-thumb-color: var(--slider-fill-color);
  --slider-direction: to right;

  /* reverse gradient direction for right-to-left layouts */
  &:dir(rtl) {
    --slider-direction: to left;
  }

  /* Read min and max from attributes; --control-value is synced by the script below. */
  --attr-min: attr(min type(<number>), 0);
  --attr-max: attr(max type(<number>), 100);
  --control-value: attr(value type(<number>), 50);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  inline-size: 100%;
  block-size: 2.5rem; /* Preserve a generous interaction area. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

/* WebKit/Blink. */
input[type="range"]::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc(
    (var(--slider-track-size) - var(--slider-thumb-size)) / 2
  );
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

/* Firefox. */
input[type="range"]::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

input[type="range"]::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

input[type="range"]::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

Stellen Sie immer eine sichtbare Tastaturfokusanzeige bereit, nachdem Sie die native Darstellung entfernt haben. Verwenden Sie nicht nur Farbe:

input[type="range"]:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 4px;
}

Aktiven Track formatieren

Wenn der gefüllte Teil des Tracks anders formatiert ist als der ungefüllte, wird er von Firefox über ::-moz-range-progress verfügbar gemacht. WebKit/Blink bieten kein entsprechendes Pseudoelement. Synchronisieren Sie daher den Live-Eingabewert mit --control-value bei input-Ereignissen:

const slider = document.querySelector('#range-slider');

function syncSliderValue() {
  slider.style.setProperty('--control-value', slider.value);
}

syncSliderValue();
slider.addEventListener('input', syncSliderValue);

Beschränkungen

  • Kombinieren Sie WebKit- und Firefox-Pseudoselektoren nicht in einer einzigen durch Kommas getrennten Liste (z. B. ::-webkit-slider-thumb, ::-moz-range-thumb). Browser verwerfen die gesamte Regel, wenn ein nicht erkanntes herstellerspezifisches Pseudoelement gefunden wird.

Fallback-Zustände

Fallbacks und Browserunterstützung für „accent-color“

Das Attribut accent-color ist eine progressive Verbesserung. Browser, die diese Eigenschaft nicht unterstützen, ignorieren sie und verwenden ihre Standard-UI-Farben.

Fallbacks und Browserunterstützung für progress() und attr()

Wenn progress() nicht unterstützt wird, berechnen Sie --slider-progress mit calc():

@supports not (opacity: progress(1, 0, 100)) {
  input[type="range"] {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

Wenn der eingegebene attr() nicht unterstützt wird, synchronisieren Sie --attr-min und --attr-max aus den Attributen min und max der Eingabe in JavaScript:

function syncSliderValue() {
  slider.style.setProperty('--attr-min', slider.min || 0);
  slider.style.setProperty('--attr-max', slider.max || 100);
  slider.style.setProperty('--control-value', slider.value);
}