Slider

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(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(value)}
/>
<Input
align="center"
selectall
value={String(value)}
onChange={({ 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>}
/>