Skip to content

Import

import { Slider } from '@dnb/eufemia'

Description

The Slider component provides a visual indication of an adjustable value. A value can be adjusted (increased or decreased) by moving the drag handle along a track (usually horizontal or vertical). Remember to inform users that they can also adjust the value directly in the value input field (if it exists).

Relevant links

Accessibility

The Slider uses a semantic <input type="range"> element for the thumb control, ensuring keyboard accessibility. Arrow keys adjust the value, and Home/End keys jump to min/max values. The current value, minimum, and maximum are announced to screen readers via aria-valuemin, aria-valuemax, and aria-valuenow.

Define a min and max value

Keep in mind, you should most probably define your min and max value, because they are tied closely to your given value property.