Saklaw
Gamitin ang aming custom na range input para sa pare-parehong cross-browser styling at built-in na pag-customize.
Pangkalahatang-ideya
Gumawa ng mga custom <input type="range">
na kontrol gamit ang .form-range
. Ang track (ang background) at thumb (ang halaga) ay parehong naka-istilo upang lumitaw nang pareho sa mga browser. Dahil ang Firefox lang ang sumusuporta sa "pagpupuno" ng kanilang track mula sa kaliwa o kanan ng hinlalaki bilang isang paraan upang biswal na ipahiwatig ang pag-unlad, hindi namin ito sinusuportahan sa kasalukuyan.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Hindi pinagana
Idagdag ang disabled
katangian ng boolean sa isang input upang bigyan ito ng kulay abong hitsura at alisin ang mga event ng pointer.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min at max
Ang mga input ng saklaw ay may mga implicit na halaga para sa min
at max
— 0
at 100
, ayon sa pagkakabanggit. Maaari kang tumukoy ng mga bagong halaga para sa mga gumagamit ng min
at mga max
katangian.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Mga hakbang
Bilang default, ang mga input ng range ay "snap" sa mga halaga ng integer. Upang baguhin ito, maaari kang tumukoy ng step
halaga. Sa halimbawa sa ibaba, doble namin ang bilang ng mga hakbang sa pamamagitan ng paggamit ng 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
Mga variable
$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;