Chakra-UI

I♥️Components

Slider

|

Chakra Docs

|

⦾ The Chakra UI Slider component is a versatile tool that allows users to make selections from a range of values. It provides a set of subcomponents that work together to create a fully functional slider interface.

Sliders are particularly useful for adjusting settings where there is a range of values to choose from, such as volume controls, brightness controls, or applying image filters like contrast or saturation. By dragging the slider handle, users can easily and intuitively set the desired value within the available range.

Let's take a closer look at each subcomponent and explore the various functionalities they offer.

  • Slider: serves as the wrapper that provides context and functionality for all the other subcomponents. It acts as the parent container for the slider interface.
  • SliderTrack: represents the empty part of the slider that shows the track. It acts as a container for the SliderFilledTrack component.
  • SliderFilledTrack: represents the filled part of the slider, indicating the selected value. It is a child component of SliderTrack.
  • SliderThumb: the handle used to change the slider value. Users can click and drag the thumb along the track to select a specific value. It is a child component of Slider.
  • SliderMark: represents labels or marks that show names for specific slider values. It can be used to provide additional context or visual cues to the user.

These components can be imported as follows:

Examples

Basic Usage

⦾ The is the most basic use of the Slider, consisting of a Slider, SliderTrack, SliderFilledTrack, and SliderThumb.

Code

Customizing the Color Scheme

⦾ The following example presents each colorScheme option available in Chakra applied to a simple slider. To create any of these, simply use its respective prop definition as labeled above the slider.
colorScheme="whiteAlpha"
colorScheme="blackAlpha"
colorScheme="gray"
colorScheme="red"
colorScheme="orange"
colorScheme="yellow"
colorScheme="green"
colorScheme="teal"
colorScheme="blue"
colorScheme="cyan"
colorScheme="purple"
colorScheme="pink"
colorScheme="linkedin"
colorScheme="facebook"
colorScheme="messenger"
colorScheme="whatsapp"
colorScheme="twitter"
colorScheme="telegram"

Code

Slider Orientation

⦾ The Slider component supports vertical orientation by using the orientation prop. You can also adjust the minimum height of the slider track using the minH prop.

Code

Slider Customization

⦾ The Slider component is designed to be easily customized. You can modify the background color of the SliderTrack andSliderFilledTrack, and even replace the SliderThumb with custom content.

Code

Discrete Sliders

⦾ Discrete sliders allow users to snap to predefined sets of values. This can be achieved by setting the step prop to define the interval between values.

Code

Custom Labels

⦾ You can add custom labels and marks to the Slider component using the SliderMark subcomponent. The example below demonstrates adding custom labels at specific values and displaying the current value dynamically.

Inside the Slider component, there are four SliderMark components used as custom labels and marks. Additionally, there is a SliderMark component with dynamic content to display the current value of the slider. It uses the sliderValue state variable as thevalue prop, displaying the current value dynamically.

Code

Using Tooltip

⦾ You can enhance the Slider component by adding a Tooltip to the SliderThumb. This can provide additional information or visual feedback to the user. This essentially creates a similar effect to the example above, but with a tooltip instead of a label, therefore it only shows up on hover with the settings used below.

Code

Did you know?

Creative Idea No. 1

Image Gallery Slider: You can use the Slider component to create an interactive image gallery slider. Instead of using the default SliderThumb, you can customize it to display thumbnail images. When users drag the slider, the main image updates to correspond with the selected thumbnail. This provides a visually engaging way to navigate through a collection of images.
Image 1

Code

Creative Idea No. 2

Color Picker Slider: You can use the Slider component to create a color picker. By mapping the Slider value to the color's hue, you can allow users to slide through a range of colors and dynamically update a visual representation of the selected color.

Code

Creative Idea No. 3

Volume Control Slider: You can use the Slider component to create a sound volume control. By associating the Slider value with the volume level, you can allow users to adjust the volume of an audio or video player by sliding the control.
Volume: 50%

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.