Slider Field

SliderField renders a Slider with a label, and easy implementation with Form. It also renders a Slider.Value label underneath the slider, and a Slider.Steps component should steps be passed in.

In it's most simple form, a slider allows one value to be set between two given values (default 0 and 100).

Please note: the value or defaultValue passed in should always be an array.

<Form>
  <SliderField name="slider" label="Select a value" defaultValue={[50]} className="w-65" />
</Form>

With optional Slider.Steps:

<Form>
  <SliderField
    name="slider"
    label="Select a value (now with steps)"
    defaultValue={[50]}
    steps={[
      { value: 0, label: 'min' },
      { value: 50, label: 'mid' },
      { value: 100, label: 'max' }
    ]}
  />
</Form>

API Reference