Skip to content
Home

Slider

Info
Demos
Properties
Events

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"
    min={-40}
    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;
  padding: 1rem;
  background: dimgray;
  .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>}
/>