<lm-range-field> – Glidebryter (enkelt tall) / Range field

Om komponenten

Kanonisk navn: <lm-range-field>
Synonymer: range slider, slider, skyveknapp
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="range">, som nettleseren allerede gir korrekt role="slider" og full tastaturstøtte for - ikke et eget APG-widgetmønster utover det native elementet selv (APG Slider-mønsteret for flere håndtak dekkes av den separate <lm-range-slider>).
Parts: etikett, etikett-tekst, verdi, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker <input type="range"> uendret for selve glidebryteren og tastaturhåndteringen. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett, en live verditekst og form-association.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--space-xs, ...), var(--color-accent, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-muted, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

Ett-håndtaks glidebryter basert på native <input type="range">, med en live oppdatert verditekst ved siden av etiketten og samme hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.

Egner seg for

Å velge én enkelt numerisk verdi innenfor et kjent intervall der den relative posisjonen er mer intuitiv enn å skrive et tall - volum, prosent, terskelverdier.

Egner seg ikke for

Å velge et intervall mellom to verdier (min og maks samtidig) - bruk <lm-range-slider>, som dekker APG Slider (multithumb)-mønsteret.
Presise, eksakte tall der brukeren vil skrive verdien direkte - bruk <lm-number-field>.

Bruk

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

<lm-range-field name="sparerate" label="Sparerate" min="0" max="100" value="20" suffiks="%"></lm-range-field>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`value`	`string`		Attributt/property. Gjeldende verdi.
`min`	`number`		Attributt. Videresendes til det interne feltet.
`max`	`number`		Attributt. Videresendes til det interne feltet.
`step`	`number`		Attributt. Videresendes til det interne feltet.
`suffiks`	`string`		Attributt. Kort enhetstekst (f.eks. "%"/" kr") vist rett etter verditallet.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet.
`help`	`string`		Attributt. Kort hjelpetekst vist under feltet, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`etikett`	Det omsluttende `<label>`-elementet.
`etikett-tekst`	`<span>`-en med selve etikett-teksten.
`verdi`	`<span>`-en som viser gjeldende verdi live.
`felt`	Det interne `<input type="range">`-elementet.
`hjelpetekst`	`<small>`-elementet med hjelpeteksten.
`feilmelding`	`<small role="alert">`-elementet med valideringsmeldingen.

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-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

lm-range-field::part(etikett-tekst) {
    /* egne stiler for "`<span>`-en med selve etikett-teksten." */
}

lm-range-field::part(verdi) {
    /* egne stiler for "`<span>`-en som viser gjeldende verdi live." */
}

lm-range-field::part(felt) {
    /* egne stiler for "Det interne `<input type="range">`-elementet." */
}

lm-range-field::part(hjelpetekst) {
    /* egne stiler for "`<small>`-elementet med hjelpeteksten." */
}

lm-range-field::part(feilmelding) {
    /* egne stiler for "`<small role="alert">`-elementet med valideringsmeldingen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`checkValidity()`	-		Videresender til den interne `ElementInternals.checkValidity()`.
`reportValidity()`	-		Videresender til den interne `ElementInternals.reportValidity()`.

Tilgjengelighet

Selve glidebryteren beholder all native tastatur- (piltaster, Home/End) og skjermleserstøtte uendret (native role="slider" med automatisk aria-valuenow).

Selve glidebryteren beholder all native tastatur- og skjermleserstøtte, inkludert automatisk aria-valuenow.
Verditeksten er et rent visuelt tillegg ved siden av etiketten, ikke en erstatning for den native aria-valuenow-annonseringen.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt.
valueAsNumber-propertyen gir/tar imot et ekte tall, slik at forbrukerkode slipper manuell streng-parsing.

Referanser

Se også:

../range-slider/index.html - brukes i stedet for et intervall med to håndtak (APG Slider/multithumb).
../number-field/index.html - brukes i stedet når brukeren skal skrive en presis verdi direkte.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: designsystem/komponenter/skjema/skjema-felt-delt.css, designsystem/komponenter/skjema/skjema-felt-delt.js