Range Updated

Usage

Range lets users pick a numeric value with a slider that must be no less than a given minimum and no more than a given maximum. Set min, max and step to define the allowed values, and value for the initial position.

The range renders its built-in label, hint and error on its own. Wrapped in a Field, the Field takes over with a Field Label, Field Description and Field Error, and the built-in versions step aside automatically.

import "@nordhealth/components/lib/Range"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"

Standalone or inside a Field

Use the control on its own with its built-in label, hint and error, or wrap it in a Field — the Field then provides the labelling. Both render the same control:

Examples

Range and step

Use min, max and step to control the bounds and increment of the slider.

Steps

Use step to constrain the value to fixed increments as the user drags the thumb.

Unit

Display a unit alongside the value to clarify what the number represents.

Hint

Add a Field Hint to give the user extra guidance about the field.

Required

Set required on the Field Label to show the required indicator and mark the control required.

Custom thumb size

Adjust the size of the draggable thumb with a CSS custom property.

Custom track size

Adjust the thickness of the track with a CSS custom property.

Responsive

The range adapts to the available space and remains usable across viewport sizes.

Error

Show validation with a Field Error and mark the Field invalid.

Disabled and read-only

A disabled range cannot be focused or changed and is excluded from form submission. A readonly range can be focused but not changed, and its value is still submitted.

Hidden label

Every range needs an accessible name. To hide the label visually while keeping it available to assistive technology, set hide-label on the range and connect a Field Label with for. Inside a Field, a Field Label provides this instead.

Expand

Use expand to make the range fill the width of its container.

RTL

Range follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Always give the range an accessible name with a Field Label connected via for. If a visible label doesn't suit the layout, set hide-label on the range so it keeps an accessible name for screen reader users.
• The slider is keyboard operable: arrow keys move the value by step between min and max, and the current value is exposed to assistive technology.
• Convey validation with a Field Error rather than colour alone — it is associated with the range and announced to assistive technology.
• Mark required fields by setting required on the Field Label; it shows the indicator and marks the control required.
• Prefer readonly over disabled when the value is still relevant but not adjustable, as disabled controls are removed from the tab order and not submitted with the form.