Rækkevidde

Brug vores brugerdefinerede sortiment input til ensartet cross-browser styling og indbygget tilpasning.

På denne side

Oversigt

Opret brugerdefinerede <input type="range">kontroller med .form-range. Sporet (baggrunden) og tommelfingeren (værdien) er begge stylet til at se ens ud på tværs af browsere. Da kun Firefox understøtter at "fylde" deres spor fra venstre eller højre for tommelfingeren som et middel til visuelt at indikere fremskridt, understøtter vi det ikke i øjeblikket.

Eksempelområde

html

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

handicappet

Tilføj den disabledbooleske attribut på et input for at give det et nedtonet udseende, fjerne pointerhændelser og forhindre fokusering.

Deaktiveret område

html

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

Min og max

Områdeinput har implicitte værdier for henholdsvis minog max— 0og 100. Du kan angive nye værdier for dem, der bruger attributterne minog .max

Eksempelområde

html

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

Trin

Som standard "snap" interval-input til heltalsværdier. For at ændre dette kan du angive en stepværdi. I eksemplet nedenfor fordobler vi antallet af trin ved at bruge step="0.5".

Eksempelområde

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;