Aypasqan

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

Kay p'anqapi

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.

Ejemplo de rango

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.

Rango discapacitado

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 max— 0chaymanta 100, chaymanta. Musuq chanikunata niyta atinki chaymanta minchaymanta maxlayakunata llamk'achiqkunapaq.

Ejemplo de rango

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".

Ejemplo de rango

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;