Ibiti o

Lo awọn igbewọle ibiti aṣa wa fun aṣa aṣawakiri aṣawakiri deede ati isọdi ti a ṣe sinu.

Lori iwe yi

Akopọ

Ṣẹda awọn <input type="range">iṣakoso aṣa pẹlu .form-range. Orin naa (lẹhin) ati atanpako (iye) jẹ aṣa mejeeji lati han kanna kọja awọn aṣawakiri. Bi Firefox nikan ṣe ṣe atilẹyin “fikun” orin wọn lati apa osi tabi ọtun ti atanpako bi ọna lati ṣe afihan ilọsiwaju ni oju, a ko ṣe atilẹyin lọwọlọwọ.

Iwọn apẹẹrẹ

html

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

Alaabo

Ṣafikun disabledabuda Boolean lori titẹ sii lati fun ni irisi grẹy, yọ awọn iṣẹlẹ itọka kuro, ati ṣe idiwọ idojukọ.

Ibiti alaabo

html

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

Min ati max

Awọn igbewọle ibiti o ni awọn iye ti ko ṣoki fun minati max- 0ati 100, lẹsẹsẹ. O le pato awọn iye titun fun awọn ti nlo minati awọn maxabuda.

Iwọn apẹẹrẹ

html

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

Awọn igbesẹ

Nipa aiyipada, awọn igbewọle ibiti “fifẹ” si awọn iye odidi. Lati yi eyi pada, o le pato stepiye kan. Ni apẹẹrẹ ni isalẹ, a ṣe ilọpo meji nọmba awọn igbesẹ nipasẹ lilo step="0.5".

Iwọn apẹẹrẹ

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

Awọn oniyipada

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