Range
Sèvi ak entrées ranje koutim nou an pou fason ki konsistan kwa-navigatè ak personnalisation entegre.
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 disabled
atribi 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 min
ak max
— 0
ak 100
, respektivman. Ou ka presize nouvo valè pou moun ki sèvi min
ak max
atribi 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 step
valè. 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;