Skip to content

Description

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).

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.

Demos

Default Slider

Code Editor
<Slider
  min={0}
  max={100}
  value={70}
  label="Default Slider:"
  numberFormat={{
    currency: 'EUR',
  }}
  tooltip={true}
  onChange={({ value }) => console.log('onChange:', value)}
/>

Slider with multiple thumb buttons

Provide the value property as an array with numbers. The onChange event will then also return the property value as an array. The + and - buttons will not be visible when when more than one thumb button is present.

Code Editor
<FormRow vertical>
  <Slider
    min={0}
    max={100}
    value={[30, 70]}
    step={5}
    label="Range with steps:"
    numberFormat={{
      currency: 'USD',
    }}
    tooltip
    onChange={({ value }) => console.log('onChange:', value)}
    bottom
  />
  <Slider
    min={0}
    max={100}
    value={[10, 30, 50, 70]}
    label="Multi thumbs:"
    numberFormat={(value) =>
      format(value, {
        percent: true,
        decimals: 0,
      })
    }
    tooltip
    onChange={({ value, number }) =>
      console.log('onChange:', value, number)
    }
  />
</FormRow>

By default, the thumbs can swap positions. You can change that behavior with multiThumbBehavior.

Code Editor
<FormRow vertical>
  <Slider
    multiThumbBehavior="omit"
    value={[30, 70]}
    label="Omit behavior:"
    numberFormat={{
      currency: 'EUR',
    }}
    tooltip={true}
    onChange={({ value }) => console.log('onChange:', value)}
    bottom
  />
  <Slider
    multiThumbBehavior="push"
    value={[10, 50, 70]}
    step={1}
    label="Push behavior:"
    numberFormat={{
      currency: true,
    }}
    tooltip={true}
    onChange={({ value, number }) =>
      console.log('onChange:', value, number)
    }
  />
</FormRow>

Vertical slider with steps of 10

Code Editor
const VerticalWrapper = styled.div`
  display: inline-flex;
  flex-direction: column;
  height: 12rem; /* max-height works fine except in Safari */
`
render(
  <VerticalWrapper>
    <Slider
      min={0}
      max={100}
      value={20}
      step={10}
      vertical={true}
      label="Vertical slider:"
      labelDirection="vertical"
      onChange={({ value }) => console.log('onChange:', value)}
    />
  </VerticalWrapper>,
)

Horizontal and vertical slider in sync with input field

Code Editor
const Component = () => {
  const [value, setValue] = React.useState(70)
  return (
    <>
      <Slider
        value={value}
        step={1}
        hideButtons
        label="Slider A:"
        numberFormat={{
          currency: 'EUR',
        }}
        tooltip={true}
        onChange={({ value }) => setValue(parseFloat(String(value)))}
      />
      <VerticalWrapper>
        <Slider
          value={value}
          vertical={true}
          hideButtons={true}
          step={10}
          label="Slider B:"
          labelDirection="vertical"
          numberFormat={(value) =>
            format(value, {
              currency: 'NOK',
            })
          }
          tooltip
          alwaysShowTooltip
          onChange={({ value }) => setValue(parseFloat(String(value)))}
        />
        <Input
          align="center"
          selectall
          value={String(value)}
          on_change={({ value }) => setValue(value)}
        />
      </VerticalWrapper>
    </>
  )
}
const VerticalWrapper = styled.div`
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 20rem; /* max-height works fine except in Safari */
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.1);
  .dnb-input {
    width: 4rem;
    margin-top: 1rem;
  }
`
render(<Component />)

Slider with a suffix

Code Editor
<Slider
  min={0}
  max={100}
  value={70}
  label="Slider with suffix:"
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>