Rentang
Anggo input rentang khusus kami pikeun gaya cross-browser anu konsisten sareng kustomisasi anu diwangun.
Ihtisar
Jieun <input type="range">kadali custom kalawan .form-range. Lagu (kasang tukang) sareng jempol (nilai) duanana ditata supados sami dina panyungsi. Kusabab ngan ukur Firefox anu ngadukung "ngeusian" laguna ti kénca atanapi katuhu jempol minangka sarana pikeun nunjukkeun kamajuan sacara visual, ayeuna urang henteu ngadukung éta.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">ditumpurkeun
Tambahkeun disabledatribut boolean dina input pikeun masihan penampilan abu-abu sareng ngahapus acara pointer.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min sareng max
Input rentang gaduh nilai implisit pikeun minsareng max- 0sareng 100, masing-masing. Anjeun tiasa netepkeun nilai anyar pikeun anu nganggo atribut minsareng .max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Léngkah
Sacara standar, rentang inputs "snap" kana nilai integer. Pikeun ngarobah ieu, anjeun bisa nangtukeun stepnilai a. Dina conto di handap, urang gandakeun jumlah léngkah ku ngagunakeun 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
Variabel
$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;