Default

By default all you need to pass is a label:

Editable example
() => {
  const [value, setValue] = React.useState(0);
  return (
    <div>
      <SliderInput
        label="How much money do you want?"
        handleValueChange={setValue}
      />
      <div>The current value is {value}</div>
    </div>
  )
}
() => {
  const [value, setValue] = React.useState(0);
  return (
    <div>
      <SliderInput
        label="How much money do you want?"
        handleValueChange={setValue}
      />
      <div>The current value is {value}</div>
    </div>
  )
}

This component is only designed to be used as an uncontrolled component -- we provide a handleValueChange function for convenience to listen to any changes but there's no way to set the value after the initial value has been set.

Theming

Sliders are also usable with a dark background by passing a theme prop:

Editable example
<div
  style={{
    background: 'var(--midnight)',
    padding: 'var(--space-m)',
  }}
>
  <SliderInput 
    label="How dark is it?"
    theme={SliderTheme.Dark}
  />
</div>
<div
  style={{
    background: 'var(--midnight)',
    padding: 'var(--space-m)',
  }}
>
  <SliderInput 
    label="How dark is it?"
    theme={SliderTheme.Dark}
  />
</div>

With an initial value

You can provide a custom initial value (default is 25):

Editable example
<SliderInput
  label="What's the meaning of life?"
  initialInputValue={42}
/>
<SliderInput
  label="What's the meaning of life?"
  initialInputValue={42}
/>

Min and max values

By default, the minimum is set at 0 and maximum is set at 100. You can also set custom minimum and maximum range values.

Editable example
<SliderInput
  label="Give me a number between 1 and 10"
  minimum={1}
  maximum={10}
  initialInputValue={5}
/>
<SliderInput
  label="Give me a number between 1 and 10"
  minimum={1}
  maximum={10}
  initialInputValue={5}
/>

Unit customisation

You can provide a unit prop; for example when using the SliderInput to set font size:

Editable example
<SliderInput
  label="Font size"
  unit={"(px)"}
/>
<SliderInput
  label="Font size"
  unit={"(px)"}
/>

Best practices

1. Use Sliders for options that require fine granular control over a numeric value, such as opacity
2. Choose a short and descriptive label that describes the value being changed
3. If the number value represents a unit of something, always provide a unit label
4. Avoid using a Slider for ranges that are extremely large (e.g. 1-1000) or very small (e.g. 1-5)

Accessibility

This component makes use of native HTML form elements, which ensures usability from the keyboard and with screen readers. Always provide a label for screen readers to explain the purpose of the slider.