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ọ.
<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 ati yọ awọn iṣẹlẹ itọka kuro.
<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.
<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".
<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;