Bereich
Verwenden Sie unsere benutzerdefinierten Bereichseingaben für konsistentes browserübergreifendes Design und integrierte Anpassung.
Überblick
Erstellen Sie benutzerdefinierte <input type="range">Steuerelemente mit .form-range. Die Spur (der Hintergrund) und der Daumen (der Wert) sind beide so gestaltet, dass sie in allen Browsern gleich angezeigt werden. Da nur Firefox das „Füllen“ der Spur links oder rechts vom Daumen unterstützt, um den Fortschritt visuell anzuzeigen, unterstützen wir dies derzeit nicht.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Deaktiviert
Fügen disabledSie einem Eingang das boolesche Attribut hinzu, um ihm ein ausgegrautes Aussehen zu verleihen, Zeigerereignisse zu entfernen und das Fokussieren zu verhindern.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min. und max
Bereichseingaben haben implizite Werte für minund max— 0bzw. 100. Sie können neue Werte für diejenigen angeben, die die Attribute minund verwenden.max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Schritte
Standardmäßig „rasten“ Bereichseingaben an ganzzahligen Werten ein. Um dies zu ändern, können Sie einen stepWert angeben. Im folgenden Beispiel verdoppeln wir die Anzahl der Schritte mit step="0.5".
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">Sass
Variablen
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: $gray-300;
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: $box-shadow-inset;
$form-range-thumb-width: 1rem;
$form-range-thumb-height: $form-range-thumb-width;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-border: 0;
$form-range-thumb-border-radius: 1rem;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: $gray-500;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;