Slider Component
The Slider component allows for the adjustment of a numerical value within a defined range using a graphical slider interface. It is built using Material-UI components and integrates seamlessly with forms managed by React Hook Form.
warning
Ensure that the slider values are managed correctly in the form state to avoid discrepancies and state synchronization issues.
Examples
A simple slider with standard configuration.
Form Data:
{}Props
meta object
| Name | Description | Type |
|---|---|---|
| displayName | The label displayed above the slider | string |
| displayType | Type of the field display, which is "slider" in this case | string |
| value | Initial value of the slider | number |
| min | Minimum value the slider can adjust to | number |
| max | Maximum value the slider can adjust to | number |
| step | The granularity that the slider can step through | number |
| description | A brief description of what the slider controls | string |
| htmlProps | Additional HTML properties like showInfoIcon | object |
| allowDynamic | Enable Static or dynamic input for array input | boolean |
| showRange | Show range text below slider | boolean |
| readOnly | A readonly field is not editable and value cannot be changed | boolean |
htmlProps object
| Name | Description | Type |
|---|---|---|
| showInfoIcon | Toggles visibility of an info icon with a tooltip on hover | boolean |
Interaction Handlers
| Name | Description |
|---|---|
| handleChange | Function to execute when the slider value changes |
| validationRules | Validation rules passed to the Controller component |