Range

Sèvi ak entrées ranje koutim nou an pou fason ki konsistan kwa-navigatè ak personnalisation entegre.

Nan paj sa a

Apèsi sou lekòl la

<input type="range">Kreye kontwòl koutim ak .form-range. Tras la (fon an) ak gwo pous (valè a) yo tou de style yo parèt menm jan an atravè navigatè yo. Kòm sèlman Firefox sipòte "ranpli" tras yo soti nan goch la oswa dwa nan gwo pous la kòm yon mwayen pou endike pwogrè vizyèlman, nou pa sipòte li kounye a.

Egzanp seri

html

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

Andikape

Ajoute disabledatribi boolean an sou yon opinyon pou bay li yon aparans gri, retire evènman konsèy, epi anpeche konsantre.

Ranje andikape

html

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

Min ak max

Antre ranje gen valè implicite pou minak max— 0ak 100, respektivman. Ou ka presize nouvo valè pou moun ki sèvi minak maxatribi yo ak.

Egzanp seri

html

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

Etap

Pa default, ranje antre "menen" nan valè nonb antye relatif. Pou chanje sa a, ou ka presize yon stepvalè. Nan egzanp ki anba a, nou double kantite etap lè nou itilize step="0.5".

Egzanp seri

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

Varyab

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