Skip to content
Home

Slider

Info
Demos
Properties
Events

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

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

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

<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

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

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

<Slider

  min={0}

  max={100}

  value={70}

  label="Slider with suffix:"

  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}

/>