Slider

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

To begin using the Slider component, you only need to provide the required name property. This allows the field to be properly identified within the form. If you want to handle change events in the Slider component, you can add the onChange property to it. This allows you to respond to value updates as they occur. Additionally, 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, the Slider component allows value selection ranging from 0 to 100. However, you can customize this range by utilizing the min and max properties.

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

The Slider component has a default step of 1 when selecting a value, but you can customize this by using the step property. If the value you provide 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 the 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, the Slider component can be used as either a controlled or uncontrolled component. By default, the Slider is uncontrolled, allowing you to set the initial value using the defaultValue property. In this case, all change events are handled automatically by the component. This approach is useful when you want to populate the default value of the field from a data source but don't require manual control over it afterward.

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

If you want to have manual control over the state of the field, you can make use of the value property. By utilizing the value property, you have full control over the component's value and prevent automatic handling of the value. You will be responsible for updating the state using the onChange handler, allowing you to incorporate custom logic before the state is updated.

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

To use the Slider for selecting a range of values, you can pass the range flag to it. This flag will modify the value 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. Please 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, you can 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 provide clarity on the expected data input, utilize labels or status messages in conjunction with the FormControl utility. This will help guide the user 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>