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 disabled
Sie einem Eingang das boolesche Attribut hinzu, um ihm ein ausgegrautes Aussehen zu verleihen, und entfernen Sie Zeigerereignisse.
<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 min
und max
— 0
bzw. 100
. Sie können neue Werte für diejenigen angeben, die die Attribute min
und 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 step
Wert 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;