Varier
Utilisez nos entrées de gamme personnalisées pour un style cohérent entre navigateurs et une personnalisation intégrée.
Aperçu
Créez des contrôles <input type="range"> personnalisés avec .form-range. La piste (l'arrière-plan) et le pouce (la valeur) sont tous deux stylisés pour apparaître de la même manière dans tous les navigateurs. Comme seul Firefox prend en charge le “remplissage” leur trace depuis la gauche ou la droite du pouce comme moyen d'indiquer visuellement la progression, nous ne la prenons pas en charge actuellement.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Désactivé
Ajoutez l'attribut booléen disabled sur une entrée pour lui donner une apparence grisée et supprimer les événements de pointeur.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min et max
Les entrées de plage ont des valeurs implicites pour min et max—0 et 100, respectivement. Vous pouvez spécifier de nouvelles valeurs pour ceux qui utilisent les attributs min et max.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Pas
Par défaut, les entrées de plage “snap” aux valeurs entières. Pour changer cela, vous pouvez spécifier une valeur step. Dans l'exemple ci-dessous, nous doublons le nombre d'étapes en utilisant 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
Variables
$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;