Spring til hovedindhold Spring til dokumentnavigation
in English

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.

<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 og fjerne pointerhændelser.

<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

<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".

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