The Slider component provides a visual indication of 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).


Default Slider

Vertical slider with steps of 10

Horizontal and vertical slider in sync with input field

Slider with suffix

Native Range Slider

In order to get the styles, import also: @dnb/eufemia/components/slider/style/dnb-range.min.css

Native Range Slider