Saltar al contenido principal Salta a docs navegación
Check
in English

Aypasqan

Sapanchasqa rango yaykuyniyku llamk'achiy sapa kuti chakana-navegador estilopaq chaymanta ruwasqa ruwanapaq.

Hatun qhawariy

Sapanchasqa <input type="range">kamachiykunata ruway .form-range. Pista (qhipa kaq) chaymanta hatun maki (chani) iskayninku estiloyuq kanku kikin rikunankupaq tukuy maskaqkunapi. Imaynachus Firefoxlla yanapakun “hunt’ayta” paykunaq pista paña utaq paña makimanta huk ñan hina rikuywan ñawpaqman puriyninta rikuchinapaq, kunan mana yanapaykuchu.

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

Wañuchisqa

Huk yaykusqapi boolean laya yapay, disabledhuk q'illu rikch'ayta qunapaq, rikuchiq ruwaykunata hurqunapaq, chaymanta mana qhawayta hark'anapaq.

html nisqapi
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min y max

Rango yaykuykuna implícito chanikunayuq kanku minchaymanta max0chaymanta 100, chaymanta. Musuq chanikunata niyta atinki chaymanta minchaymanta maxlayakunata llamk'achiqkunapaq.

html nisqapi
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Pasokuna

Ñawpaqmanta, rango yaykuykuna “snap” hunt'a yupay chanikunaman. Kayta tikranaykipaqqa, huk stepchanita niyta atinki. Uraypi kaq ejemplopiqa, iskay kutita ruwanchikmi step="0.5".

html nisqapi
<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 nisqakuna

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