Range Slider

A slider to choose a number between two values. It supports dynamic minimum and maximum values, and step size, and can perform validation of custom rules.

The Range Slider can be used to set a range between minimum and maximum values.


  • Range Selection: Users can click and drag the blue circular handles along the slider track to choose a value within the specified range.

  • Adjustable Min/Max Values (Builder Controlled): The builder can dynamically change the minimum and maximum values based on other values or conditions. Users cannot change these values within the app.

  • Default Range: Builder can also change the default set range to fit specific requirements.

  • Visual Feedback: The position of the handle provides visual feedback on the current selected value.


This component is typically used in forms or settings where users need to specify a value within a certain range, such as setting the intensity of a filter, adjusting volume, or selecting a rating. The optional nature of the range selection is indicated by the label, allowing users to choose whether or not to adjust this parameter. While users interact with the slider to select values, builders can adjust the minimum, maximum, and default values to tailor the component to various contexts and requirements.

Last updated