SliderInput

A slider component that supports multiple values. This is a proxy for the rc-slider component with some default styles applied.

Props

'single' │ 'range'

'single'

className

String

name

String

required

onChange

Func

required

value

undefined │ number

Examples

Single Slider

<State initial={{ value: null }}>
  {({ state, setState }) => (
    <SliderInput
      name="my-slider"
      value={state.value}
      onChange={(name, value) => setState({ value })}
    />
  )}
</State><State initial={{ value: null }}>
  {({ state, setState }) => (
    <SliderInput
      name="my-slider"
      value={state.value}
      onChange={(name, value) => setState({ value })}
    />
  )}
</State>

Range Slider

Range slider support is similar to the above, but takes an array as the value prop instead of a number. The number of items in the array corresponds to the number of slides available

<State initial={{ value: [0, 25] }}>
  {({ state, setState }) => (
    <SliderInput
      as="range"
      name="my-slider"
      value={state.value}
      onChange={(name, value) => setState({ value })}
    />
  )}
</State><State initial={{ value: [0, 25] }}>
  {({ state, setState }) => (
    <SliderInput
      as="range"
      name="my-slider"
      value={state.value}
      onChange={(name, value) => setState({ value })}
    />
  )}
</State>

SliderInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Single Slider

Range Slider

Props