Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

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 disabledtoetra 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 minsy max0ary 100, tsirairay avy. Azonao atao ny mamaritra ny soatoavina vaovao ho an'ireo mampiasa ny minsy ny maxtoetra.

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

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