isan-karazany

Ampiasao ny fampidirana isan-karazany ataonay ho an'ny fanaingoana mifanandrify amin'ny navigateur sy ny fanamboarana anatiny.

Amin'ity pejy ity

Overview

Mamorona <input type="range">fanaraha-maso manokana amin'ny .form-range. Ny lalana (ny ambadika) sy ny ankihibe (ny sandany) dia samy novolavolaina mba hiseho mitovy amin'ny navigateur. Satria ny Firefox ihany no manohana ny "famenoana" ny dian-dry zareo avy eo ankavia na havanana amin'ny ankihibe ho fitaovana hanehoana ny fandrosoana, dia tsy manohana izany izahay amin'izao fotoana izao.

Ohatra isan-karazany

html

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

sembana

Ampio ny disabledtoetra boolean amin'ny fampidirana iray mba hanome azy endrika miloko volomparasy, hanesorana ny hetsika fanondro, ary hisorohana ny fifantohana.

Kilonga kilema

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min sy max

Ny fampidirana isan-karazany dia manana soatoavina implicit ho an'ny minsy max— 0ary 100, tsirairay avy. Azonao atao ny mamaritra ny soatoavina vaovao ho an'ireo mampiasa ny minsy ny maxtoetra.

Ohatra isan-karazany

html

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

DINGANA

Amin'ny alàlan'ny default, ampidiro ny "snap" amin'ny sanda integer. Raha hanova izany dia azonao atao ny mamaritra stepsanda iray. Ao amin'ny ohatra etsy ambany, dia avo roa heny ny isan'ny dingana amin'ny fampiasana step="0.5".

Ohatra isan-karazany

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

hiovaova

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