| className# | - | string |
Customize the styling of your React Range Slider by adding a custom className.
This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets. |
| clickableLabels# | true | boolean |
Enable or disable clickable labels in the React Range Slider.
When set to true, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience. |
| disabled# | false | boolean |
Control the interactive state of the React Range Slider with the disabled prop.
Setting it to true will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state. |
| distance# | 0 | number |
Define the minimum distance between slider handles using the distance prop in the React Range Slider.
This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions. |
| labels# | - | Label[] |
Add descriptive labels to your React Range Slider by providing an array of labels.
These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users. |
| max# | 100 | number |
Specify the maximum value for the React Range Slider with the max prop.
This determines the upper limit of the slider's range, enabling precise control over the highest selectable value. |
| min# | 0 | number |
Set the minimum value for the React Range Slider using the min prop.
This defines the lower bound of the slider's range, allowing you to control the starting point of user selection. |
| name# | - | string, string[] |
Assign a name to the React Range Slider for form integration.
Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms. |
| onChange# | - | (value: number[]) => void |
Handle value changes in the React Range Slider by utilizing the onChange callback.
This function is triggered whenever the slider's value updates, enabling you to manage state and respond to user interactions effectively. |
| step# | 1 | number |
Control the granularity of the React Range Slider by setting the step prop.
This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements. |
| tooltips# | true | boolean |
Toggle the visibility of tooltips in the React Range Slider with the tooltips prop.
When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users. |
| tooltipsFormat# | - | (value: number) => ReactNode |
Customize the display format of tooltips in the React Range Slider using the tooltipsFormat function.
This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information. |
| track# | fill | boolean, 'fill' |
Controls the visual representation of the slider's track. When set to 'fill', the track is dynamically filled based on the slider's value(s). Setting it to false disables the filled track. |
| value# | [] | number, number[] |
Set the current value(s) of the React Range Slider using the value prop.
Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state. |
| vertical# | false | boolean |
Orient the React Range Slider vertically by setting the vertical prop to true.
This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs. |