Vahemik

Kasutage meie kohandatud vahemiku sisendeid järjepidevaks brauseriüleseks stiiliks ja sisseehitatud kohandamiseks.

Sellel lehel

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

Näidisvahemik

html

<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, eemaldada kursori sündmused ja vältida teravustamist.

Keelatud vahemik

html

<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

Näidisvahemik

html

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

Näidisvahemik

html

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