in English

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.

Na lokasa oyo

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.

Ndakisa ya molongo

html

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

Bakanga

Bakisa disabledattribut boolean na entrée moko pona kopesa yango apparence ya gris, longola ba événements ya pointeur, pe kopekisa focusing.

Range oyo ekangami

html

<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 minna mpe max— 0mpe 100, respectivement. Okoki kolakisa motuya ya sika mpo na baye bazali kosalela bizaleli minmpe max.

Ndakisa ya molongo

html

<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 stepmotuya moko. Na ndakisa oyo ezali awa na nse, tozali kobakisa mbala mibale motángo ya matambe na kosaleláká step="0.5".

Ndakisa ya molongo

html

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