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
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical align="stretch">
    <Slider
      min={0}
      max={100}
      value={[30, 70]}
      step={5}
      label="Range with steps"
      numberFormat={{
        currency: 'USD',
      }}
      tooltip
      onChange={({ value }) => console.log('onChange:', value)}
    />
    <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)
      }
    />
  </Flex.Vertical>
</Provider>

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

Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical align="stretch">
    <Slider
      multiThumbBehavior="omit"
      value={[30, 70]}
      label="Omit behavior"
      numberFormat={{
        currency: 'EUR',
      }}
      tooltip={true}
      onChange={({ value }) => console.log('onChange:', value)}
    />
    <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)
      }
    />
  </Flex.Vertical>
</Provider>

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>}
/>

Slider with a marker

Marks a given point in the Slider with a small marker. If text property is provided to the marker object, it will be displayed in a tooltip.

You can import the marker like so:

import { SliderMarker } from '@dnb/eufemia/components/Slider'
Code Editor
<Slider
  min={0}
  max={100}
  value={50}
  extensions={{
    marker: {
      instance: SliderMarker,
      value: 20,
      text: 'Default value',
    },
  }}
  label="Slider with marker"
/>