Berik
Brûk ús oanpaste berik yngongen foar konsekwint cross-browser styling en ynboude oanpassing.
Oersicht
Meitsje oanpaste <input type="range">
kontrôles mei .form-range
. It spoar (de eftergrûn) en tomme (de wearde) binne beide stylearre om itselde te ferskinen oer browsers. Om't allinich Firefox it "foljen" fan har spoar fan 'e lofter of rjochts fan' e tomme stipet as in middel om visueel foarútgong oan te jaan, stypje wy it op it stuit net.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
Ynvalide
Foegje it disabled
Booleaanske attribút ta oan in ynfier om it in griisde uterlik te jaan en oanwizereveneminten te ferwiderjen.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
Min en max
Range-ynputen hawwe ymplisite wearden foar respektivelik min
en max
- 0
en 100
. Jo kinne nije wearden opjaan foar dyjingen dy't de attributen min
en brûke.max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
Stappen
Standert, berik ynfier "snap" nei hiele wearden. Om dit te feroarjen, kinne jo in step
wearde opjaan. Yn it foarbyld hjirûnder ferdûbelje wy it oantal stappen troch te brûken 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
Fariabelen
$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;