Vahemik
Kasutage meie kohandatud vahemiku sisendeid järjepidevaks brauseriüleseks stiiliks ja sisseehitatud kohandamiseks.
Ülevaade
Looge kohandatud <input type="range">juhtelemente rakendusega .form-range. Rada (taust) ja pöial (väärtus) on kujundatud nii, et need paistaksid kõigis brauserites ühesugused. Kuna ainult Firefox toetab nende raja "täitmist" pöidla vasakust või paremast küljest, et edenemist visuaalselt näidata, ei toeta me seda praegu.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Keelatud
Lisage disabledsisendile Boolean atribuut, et anda sellele hall ja eemaldada kursori sündmused.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min ja max
Vahemiku sisenditel on kaudsed väärtused vastavalt minja max— 0ja 100. Saate määrata uued väärtused neile, kes kasutavad atribuute minja .max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Sammud
Vaikimisi sisestavad vahemiku sisendid täisarvu väärtustele. Selle muutmiseks saate määrata stepväärtuse. Allolevas näites kahekordistame sammude arvu, kasutades 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
Muutujad
$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;