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.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Wañuchisqa
Huk yaykusqapi boolean laya yapay, disabled
huk q'illu rikch'ayta qunapaq chaymanta rikuchiq ruwaykunata hurqunapaq.
<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 min
chaymanta max
— 0
chaymanta 100
, chaymanta. Musuq chanikunata niyta atinki chaymanta min
chaymanta max
layakunata llamk'achiqkunapaq.
<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 step
chanita niyta atinki. Uraypi kaq ejemplopiqa, iskay kutita ruwanchikmi 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 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;