Slider

<View width="400px" maxWidth="100%">
  <Slider name="price" defaultMinValue={20} defaultMaxValue={60} />
</View>

To start using the Slider component, simply provide the required name property, ensuring the field is properly identified within the form. To handle change events in Slider, add the onChange property, allowing you to respond to value updates in real-time. Furthermore, Slider supports the onChangeCommit property if you only need to respond to the value update once the user has finished their selection.

<View paddingBlock={4}>
  <Slider
    name="slider"
    defaultValue={20}
    onChange={(args) => console.log(args.value)}
  />
</View>

By default, Slider component allows value selection ranging from 0 to 100. However, you can customize this range by using the min and max properties.

<View paddingBlock={4}>
  <Slider name="slider" min={10} defaultValue={20} max={30} />
</View>

Slider component has a default step of 1 when selecting a value, which you can customize using the step property. If the value provided to the Slider does not align with the specified step, the rendered value will automatically adjust based on the closest step multiplier. This ensures that Slider behaves consistently and snaps to the nearest valid step.

<View paddingBlock={4}>
  <Slider name="slider" defaultValue={25} step={10} />
</View>

Similar to using native inputs in React, Slider component can be used as either a controlled or uncontrolled component. By default, Slider is uncontrolled, enabling you to set the initial value using the defaultValue property. In this case, all change events are automatically handled by the component. This approach is useful when you want to populate the default value of the field from a data source without requiring manual control over it afterward.

<View paddingBlock={4}>
  <Slider name="slider" defaultValue={20} />
</View>

If you want manual control over the state of the field, use the value property. With the value property, you have full control over the component's value and prevent automatic handling. You'll need to update the state using the onChange handler, allowing for custom logic before the state is updated.

<View paddingBlock={4}>
  <Slider name="slider" value={20} />
</View>

To use Slider for selecting a range of values, pass the range flag to it. This flag will modify the properties it works with and its event handlers in the following way:

<View paddingBlock={4}>
  <Slider
    range
    name="slider"
    defaultMinValue={20}
    defaultMaxValue={60}
    onChange={(args) => console.log(args.minValue, args.maxValue)}
  />
</View>

You can disable the Slider by setting the disabled flag. Note that disabling the field will exclude it from the form submit query.

<View paddingBlock={4}>
  <Slider name="slider" value={20} disabled />
</View>

To customize the formatting of the selected value, use the renderValue function. This function allows you to access the current value and requires you to return a formatted string. The formatted string will not only be displayed but also announced by screen readers to provide accessibility.

<View paddingBlock={4}>
  <Slider
    name="slider"
    defaultValue={50}
    renderValue={(args) => `$${args.value}`}
  />
</View>

To clarify the expected data input, use labels or status messages alongside the FormControl utility. This helps guide users in understanding the required input for each field.

<FormControl>
  <View gap={2}>
    <FormControl.Label>Price range</FormControl.Label>
    <Slider
      name="slider"
      range
      min={100}
      max={2000}
      step={100}
      renderValue={(args) => `$${args.value}`}
    />
  </View>
</FormControl>