isan-karazany
Ampiasao ny fampidirana isan-karazany ataonay ho an'ny fanaingoana mifanandrify amin'ny navigateur sy ny fanamboarana anatiny.
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.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
sembana
Ampio ny disabled
toetra boolean amin'ny fampidirana iray mba hanomezana endrika miloko volomparasy ary hanesorana ny hetsika fanondro.
<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 min
sy max
— 0
ary 100
, tsirairay avy. Azonao atao ny mamaritra ny soatoavina vaovao ho an'ireo mampiasa ny min
sy ny max
toetra.
<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 step
sanda iray. Ao amin'ny ohatra etsy ambany, dia avo roa heny ny isan'ny dingana amin'ny fampiasana 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
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;