Rækkevidde
Brug vores brugerdefinerede sortiment input til ensartet cross-browser styling og indbygget tilpasning.
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 disabled
booleske 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 min
og max
— 0
og 100
. Du kan angive nye værdier for dem, der bruger attributterne min
og .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 step
væ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;