Intervalle

Utilisez nos entrées de gamme personnalisées pour un style cohérent entre navigateurs et une personnalisation intégrée.

Sur cette page

Aperçu

Créez des <input type="range">contrôles 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" de leur piste à partir de la gauche ou de la droite du pouce comme moyen d'indiquer visuellement la progression, nous ne le prenons pas actuellement en charge.

Exemple de gamme

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Handicapé

Ajoutez l' disabledattribut booléen sur une entrée pour lui donner une apparence grisée et supprimer les événements de pointeur.

Gamme désactivée

<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 minet max— 0et 100, respectivement. Vous pouvez spécifier de nouvelles valeurs pour ceux qui utilisent les attributs minet .max

Exemple de gamme

<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 « s'alignent » sur des valeurs entières. Pour changer cela, vous pouvez spécifier une stepvaleur. Dans l'exemple ci-dessous, nous doublons le nombre d'étapes en utilisant step="0.5".

Exemple de gamme

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Toupet

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;