Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

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.

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

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

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.

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

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;