Saklaw

Gamitin ang aming custom na range input para sa pare-parehong cross-browser styling at built-in na pag-customize.

Sa pahinang ito

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.

Saklaw ng halimbawa

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Hindi pinagana

Idagdag ang disabledkatangian ng boolean sa isang input upang bigyan ito ng kulay abong hitsura, alisin ang mga kaganapan sa pointer, at maiwasan ang pagtutok.

Hindi pinagana ang saklaw

html

<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 range ay may mga implicit na value para sa minat max— 0at 100, ayon sa pagkakabanggit. Maaari kang tumukoy ng mga bagong halaga para sa mga gumagamit ng minat mga maxkatangian.

Saklaw ng halimbawa

html

<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 stephalaga. Sa halimbawa sa ibaba, doble namin ang bilang ng mga hakbang sa pamamagitan ng paggamit ng step="0.5".

Saklaw ng halimbawa

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

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;