Slider

Import

import { Slider } from '@cerberus/react'

Usage

The Slider component is a controlled abstraction of the primitive slots to render a slider control.

Examples

Label

The Slider component supports adding header content (such as a label) through its children. This content is rendered within an HStack that justifyContent is set to space-between.

In this example, we include the Slider.ValueText which displays the current value of the slider.

Sizes

The Slider component supports different sizes through the size prop. The default size is lg.

Usage

You can control the style of the Slider by using the usage prop. The default usage is gradient.

Palette

You can customize the color palette of the Slider by using the palette prop. The default palette is action.

Note

Palettes are only customizable for non-gradient usages by nature of how CSS backgrounds work.

Range Slider

To create a range slider, set multiple values to the defaultValue prop.

Prevent Overlapping

Use the minStepsBetweenThumbs prop to avoid thumbs with the same value.

Collision Behavior

Use the thumbCollisionBehavior prop to control how thumbs interact when they collide. Options are "none" (default), "push", or "swap".

Value Text

To display the value text of the slider, use the Slider.ValueText slot.

Disabled

To disable the slider, use the disabled prop.

Steps

Use the step prop to define the step size of the slider which will create a discrete stop on value marker.

Marks

To display marks on the slider, use the marks prop.

Dragging Indicator

To display the dragging indicator, use the showIndicator prop.

Vertical

To display a vertical slider, use the orientation prop.

Controlled

When you want to control the slider value programmatically, use the onValueChange in combination with the value prop.

Store

An alternative way to control the Slider is to use the Provider component and the useSlider store hook.

This way you can access the slider state and methods from outside the slider.

Note

When using using the Provider component, you are opting out of the Slider abstraction which means you need to utilize the utility components mentioned in the Guides section.

Change End

Use the onValueChangeEnd prop to listen to the end of the slider change. This will fire when the user releases the slider thumb.

Customizing

You can fully customize every slot layer of the Slider using style props.

Guides

This abstraction renders the following shortcuts internally to streamline development.

Slider.Track

The Slider.Track and Slider.Range slots are used to render the track and range of the slider.

<SliderTrack>
  <SliderRange />
</SliderTrack>

Slider.Thumbs

The Slider.Thumb, Slider.DraggingIndicator, and Slider.HiddenInput slots are used to render the thumb of the slider.

<SliderThumb>
  <SliderDraggingIndicator />
  <SliderHiddenInput />
</SliderThumb>

If you want to render a range of thumbs, we also provide the Slider.Thumbs slot.

<Slider.Thumbs values={[25, 50]} />

Slider.Marks

The Slider.MarkerGroup and Slider.Marker slots are used to render the mark of the slider.

<SliderMarkerGroup>
  <SliderMarker />
</SliderMarkerGroup>

If you want to render a couple of marks, we also provide the Slider.Marks slot.

<Slider.Marks values={[0, 25, 50, 75, 100]} />

Custom CSS Variables

To help streamline custom styling, the slider uses a set of CSS variables that you can override:

'--slider-thumb-size': '1.5rem'   // size of the thumb
'--slider-track-size': '0.5rem'   // height of the track
'--slider-marker-center': '9px'   // the center position of the track
'--slider-marker-size': '0.06rem' // size of the marker
'--slider-marker-inset': '3px'    // distance from the track edge to the marker
'--slider-dragging-indicator-offset': '-2rem' // The gap between the thumb and the dragging indicator

Primitive Slots

The Slider exposes the following primitive slots:

API

Root

Data Attributes:

CSS Variables:

Provider

Control

Data Attributes

DraggingIndicator

Data Attributes

HiddenInput

Label

Data Attributes

MarkerGroup

Data Attributes

Marker

Data Attributes

Range

Data Attributes

Thumb

Data Attributes

Track

Data Attributes

ValueText

Data Attributes