Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

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 (aryè plan) 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.

<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 epi retire evènman konsèy yo.

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

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

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