Skip to content
Home

Slider

Info
Demos
Properties
Events

Properties

PropertiesDescription
value(required) the value of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the + and - button will be hidden on multiple thumbs).
min(optional) the minimum value. Can be a negative number as well. Defaults to 0.
max(optional) the maximum value. Defaults to 100.
step(optional) the steps the slider takes on changing the value. Defaults to null.
vertical(optional) show the slider vertically. Defaults to false.
reverse(optional) show the slider reversed. Defaults to false.
stretch(optional) if set to true, then the slider will be 100% in width.
hideButtons(optional) removes the helper buttons. Defaults to false.
multiThumbBehavior(optional) use either omit, push or swap. This property only works for two (range) or more thumb buttons, while omit will stop the thumb from swapping, push will push its nearest thumb along. Defaults to swap.
thumbTitle(optional) give the slider thumb button a title for accessibility reasons. Defaults to null.
subtractTitle(optional) give the subtract button a title for accessibility reasons. Defaults to −.
addTitle(optional) give the add button a title for accessibility reasons. Defaults to +.
numberFormat(optional) will extend the return object with a number property (from onChange event). You can use all the options from the NumberFormat component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. numberFormat={{ currency: true, decimals: 0 }}
tooltip(optional) use true to show a tooltip on mouseOver, touchStart and focus, showing the current number (if numberFormat is given) or the raw value.
alwaysShowTooltip(optional) use true to always show the tooltip, in addition to the tooltip property.
label(optional) prepends the Form Label component. If no ID is provided, a random ID is created.
labelDirection(optional) use labelDirection="vertical" to change the label layout direction. Defaults to horizontal.
labelSrOnly(optional) use true to make the label only readable by screen readers.
status(optional) text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.
statusState(optional) defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.
statusProps(optional) use an object to define additional FormStatus properties.
globalStatusId(optional) the status_id used for the target GlobalStatus.
suffix(optional) text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
extensions(optional) makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.
Space(optional) spacing properties like top or bottom are supported.

Extensions

A Slider Extension should be an object with the following properties:

import Slider, { SliderMarker } from '@dnb/eufemia/components/Slider'


render(
  <Slider
    extensions={{
      marker: {
        instance: SliderMarker,
        value: 50,
      },
    }}
  />,
)