pinterest linkedin behance copy

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 max0 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;

© 2010-2024 QZYcodes by Quazerty.