Räckvidd

Använd våra anpassade sortimentsingångar för konsekvent stil över webbläsare och inbyggd anpassning.

På den här sidan

Översikt

Skapa anpassade <input type="range">kontroller med .form-range. Spåret (bakgrunden) och tummen (värdet) är båda utformade för att se likadana ut i alla webbläsare. Eftersom endast Firefox stöder att "fylla" deras spår från vänster eller höger om tummen som ett sätt att visuellt indikera framsteg, stöder vi det för närvarande inte.

Exempelintervall

html

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

Inaktiverad

Lägg till det disabledbooleska attributet på en ingång för att ge den ett nedtonat utseende, ta bort pekarhändelser och förhindra fokusering.

Inaktiverat intervall

html

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

Min och max

Områdesingångar har implicita värden för minrespektive max— 0och 100. Du kan ange nya värden för de som använder attributen minoch .max

Exempelintervall

html

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

Steg

Som standard "snap" intervallinmatningar till heltalsvärden. För att ändra detta kan du ange ett stepvärde. I exemplet nedan fördubblar vi antalet steg genom att använda step="0.5".

Exempelintervall

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

Variabler

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