Slider

Slider is a form control that allows users to select a value from a range of values.

Basic Usage

The Slider component implements the HTML range input element.

                                                
                                                const [value, setValue] = useState();
                                                
                                                const handleChange = (event) => {
                                                  setValue(Number(event.target.value));
                                                };
                                                
                                                <Slider id="slider" label="Slider" value={value} onChange={handleChange} />;

Slider Steps and Value

You can specify the Slider steps and value range by setting the min, max, and step props.

                                                
                                                const [value, setValue] = useState();
                                                
                                                const handleChange = (event) => {
                                                  setValue(Number(event.target.value));
                                                };
                                                
                                                <Slider id="slider" label="Slider" min={3} max={12} value={value} onChange={handleChange} />;

Required

ℹ️ As per the HTML specification, the Slider component does not support the required state.

Hidden Label

                                                
                                                <Slider id="slider" label="Slider" value={value} onChange={handleChange} isLabelHidden />

Layout

Slider is fluid by default. Use parent layout components such as Grid, Stack, or Container to control the rendered width and positioning.

Helper Text

                                                
                                                <Slider id="slider" label="Slider" value={value} onChange={handleChange} helperText="Helper text" />

Validation States

Validation states implement the Validation state dictionary.

                                                
                                                <Slider
                                                  id="slider-success"
                                                  label="Slider"
                                                  value={value}
                                                  onChange={handleChange}
                                                  validationState="success"
                                                  validationText="Validation text"
                                                />
                                                <Slider
                                                  hasValidationIcon
                                                  id="slider-warning"
                                                  label="Slider"
                                                  value={value}
                                                  onChange={handleChange}
                                                  validationState="warning"
                                                  validationText="Validation text with icon"
                                                />
                                                <Slider
                                                  id="slider-danger"
                                                  label="Slider"
                                                  value={value}
                                                  onChange={handleChange}
                                                  validationState="danger"
                                                  validationText={['First validation text', 'Second validation text']}
                                                />

Disabled State

                                                
                                                <Slider id="slider-disabled" label="Slider" value={value} onChange={handleChange} isDisabled />

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

UncontrolledSlider

Basic Usage

                                                
                                                <UncontrolledSlider id="slider-uncontrolled" label="UncontrolledSlider" />

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.