<lm-range-slider> – Intervallglider / Range slider

Om komponenten

Kanonisk navn

<lm-range-slider>

Synonymer

intervallvelger, to-hendel-glider, dual slider, min-maks-filter

Kategori

skjema

ARIA-mønster

Slider (Multi-Thumb)

Parts

spor, fylt, hendel-min, hendel-maks

Native-first-vurdering

Native <input type="range"> støtter kun én hendel - det finnes ingen HTML-ekvivalent for et intervall med to uavhengige grenser. Komponenten bygger derfor begge hendlene selv, med samme role="slider"-semantikk og tastaturmodell som native range-inputs følger (piltaster ±steg, Home/End til grenseverdier).

Nettleserstøtte

Bruker Pointer Events (bredt støttet) for drag - ingen spesielle forbehold utover det.

Design-tokens

var(--color-accent, ...), var(--color-surface, ...), var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--radius-medium, ...), var(--space-small, ...), var(--border-width, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

Lar brukeren velge et tallintervall med to hendler langs ett spor - f.eks. "vis transaksjoner mellom 200 kr og 2000 kr", eller et datointervall representert som tall. Implementerer ARIA APG sitt Slider (Multi-Thumb)-mønster: hver hendel er role="slider" med egne aria-value*-attributter, styrt med piltaster, Home/End og pekerdrag.

Egner seg for

• Å filtrere et datasett på et tallintervall (beløp, avstand, dato representert numerisk) med to grenser.
• Dashboards/filterpaneler der min- og maks-grense skal justeres visuelt, ikke i to separate tekstfelt.

Egner seg ikke for

• Å velge én enkelt verdi - bruk native <input type="range"> i stedet.
• Presis, eksakt tallinntasting - kombiner gjerne med to <input type="number">-felt ved siden av for tastaturbrukere som vil skrive tall direkte.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/range-slider/range-slider.js"></script>

<lm-range-slider min="0" maks="5000" steg="50" verdi-min="200" verdi-maks="2000"></lm-range-slider>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-range-slider::part(spor) {
    /* egne stiler for "Hele sporet gliderne beveger seg langs." */
}

lm-range-slider::part(fylt) {
    /* egne stiler for "Den fylte delen av sporet mellom de to hendlene." */
}

lm-range-slider::part(hendel-min) {
    /* egne stiler for "Minimum-hendelen." */
}

lm-range-slider::part(hendel-maks) {
    /* egne stiler for "Maksimum-hendelen." */
}

Tilgjengelighet

Hver hendel er et eget role="slider"-element med aria-valuemin/aria-valuemax/aria-valuenow og et beskrivende aria-label ("Minimum"/"Maksimum"). Piltaster (høyre/opp øker, venstre/ned reduserer) med steg-størrelse; Home/End hopper til komponentens min/maks. Hver hendel er uavhengig tastaturnåbar (tabindex="0") og kan aldri flyttes forbi den andre hendelen.

• Begge hendlene er role="slider" med aria-valuemin/aria-valuemax/aria-valuenow som alltid oppdateres synkront med den visuelle posisjonen.
• Hver hendel har et fast aria-label ("Minimum"/"Maksimum") som identifiserer hvilken grense den styrer.
• Piltaster flytter kun én hendel om gangen, med steg-størrelse; Home/End hopper til ytterkantene (respekterer fortsatt at min-hendelen aldri kan overstige maks-hendelen og omvendt).

Detaljer

• Klikk direkte i sporet flytter automatisk den nærmeste av de to hendlene til klikkpunktet, i stedet for å kreve at brukeren treffer selve hendelen.
• verdi-min/verdi-maks klemmes alltid til gyldig område ved setting - de kan aldri krysse hverandre eller gå utenfor min/maks.

Referanser

Se også:

• ../range-field/index.html - brukes i stedet når intervallet kun trenger ett enkelt håndtak (én numerisk verdi med min/max/step).
• ../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Avhengigheter: Ingen