The RangeSlider provides a visually appealing and interactive way to handle input selection for numerical ranges.
RangeSlider: the main wrapper component that houses all other subcomponents. It provides the overall structure and behavior for the range selection functionality.
RangeSliderTrack: the track or bar on which the range selection occurs. It visually represents the full range of values and provides a visual indicator of the selected range.
RangeSliderFilledTrack: the portion of the track that is filled, indicating the selected range. It visually highlights the selected range within the overall track.
RangeSliderThumb: the draggable handle(s) that users can interact with to select the range. It can be customized to change its appearance and style.
These components can be imported as follows:
Customizing Color Scheme
Vertical Slider Orientation
Capturing Slider Values
To capture the final selected range, an onChangeEnd event handler is attached to the RangeSlider component. When the user finishes dragging the thumbs, this event handler updates the selectedRange state variable with the new values.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3