Mingi
Salelá ba entrées na biso ya gamme personnalisée mpo na styling ya croix-navigateur oyo ezali ntango nyonso mpe personnalisation intégrée.
Botali ya mozindo
Bosala ba <input type="range">
contrôles personnalisés na .form-range
. Track (fond) mpe thumb (valeur) nyonso mibale ezali na style mpo na komonana ndenge moko na kati ya ba navigateurs. Lokola kaka Firefox nde esungaka “kotondisa” track na bango uta na loboko ya mwasi to ya mobali ya mosapi monene lokola nzela ya kolakisa na miso bokende liboso, tozali kopesa yango maboko te na ntango oyo.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Bakanga
Bakisa disabled
attribut boolean na entrée moko pona kopesa yango apparence ya gris pe kolongola ba événements ya pointeur.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min na max
Ba entrées ya gamme ezali na ba valeurs implicites mpo min
na mpe max
— 0
mpe 100
, respectivement. Okoki kolakisa motuya ya sika mpo na baye bazali kosalela bizaleli min
mpe max
.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Matambe ya kosala
Par défaut, ba entrées ya range “snap” na ba valeurs ya nombre entier. Mpo na kobongola yango, okoki kolakisa step
motuya moko. Na ndakisa oyo ezali awa na nse, tozali kobakisa mbala mibale motángo ya matambe na kosaleláká 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 oyo azali
Ba variables oyo ezali
$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;