Chakra-UI

I♥️Components

Range Slider

|

Chakra Docs

|

⦾ The Chakra UI RangeSlider component is a versatile user interface element that allows users to select a range of values within a specified minimum and maximum range. It has two thumb sliders that can be dragged signifying the high and low end to select a range of values.

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:

Examples

Basic Usage

⦾ This example shows the basic usage of the RangeSlider component. The initial values for the range are set to 23 and 53. The defaultValue prop is used to set the initial values of the range. The defaultValue prop accepts an array of two numbers.

Code

Customizing Color Scheme

⦾ You can easily override the default color scheme of the RangeSlider component by specifying a different color from the theme. The following example demonstrates a RangeSlider with a pink color scheme.

Code

Vertical Slider Orientation

⦾ By default, the RangeSlider is horizontally oriented. However, you can change the orientation to vertical by specifying the orientation prop. The following example demonstrates a vertical RangeSlider. The orientation prop is set to 'vertical', and the minH prop defines the minimum height of the RangeSlider component.

Code

Customizing Styles

⦾ The RangeSlider component can be easily customized by composing it with other Chakra UI components. The following example showcases a customized RangeSlider with custom styles.

Code

Discrete Slider

⦾ Discrete sliders allow users to snap to predefined sets of values. This behavior can be achieved by using the step prop. The following example demonstrates a discrete RangeSlider with steps of 30. In this example, the RangeSlider allows users to select values in increments of 30. The RangeSliderThumbs can snap to these predefined values, providing a more granular selection experience.
Selected Range: 10 - 90

Code

Capturing Slider Values

⦾ The following function provides the functionality to capture and display the selected range by utilizing state management and event handling. Within the component, a minimum value (min) of 23 and a maximum value (max) of 53 are defined, establishing the range within which users can make selections.

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.

Selected Range: 23 - 53

Code

useRangeSlider Hook

⦾ The useRangeSlider hook is a powerful tool provided by Chakra UI that exports state and focus management logic. It enables developers to create customized range slider components tailored to their specific application requirements. By utilizing this hook, developers have the flexibility to build range sliders with custom behavior and styling. You can learn more about the useRangeSlider hook here.

Did you know?

Creative Idea No. 1

Filtering Numerical Data: Range sliders are very useful for filtering data. For example, if we start simple, we can filter numerical data that consists simply of a range of values. By using the slider below, you can filter the numerical values to those only within the range you have specified.
Selected Range:
0 - 100
Filtered Numbers:
10
25
50
75
90

Code

Creative Idea No. 2

Name Filtering: This example uses the JSON Placeholder API to get dummy data for a list of imaginary users. Our range slider will filter these users by the first letter of their last names and present the range of users based on the range selected within the slider.
Filter Users:
Selected Range:
A - Z
Filtered People:

Code

Creative Idea No. 3

Gradient Ranges: The following example is a fun and very interactive one. It shows how the range slider component can be used to determine the distribution of colors in a gradient. There are three selector menus from which you can choose the colors for the gradient. And the slider allows you to decide how to distribute each color along the spectrum of the gradient.
50
75

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.