🚧 This website is work in progress 👷
Components
Forms
Slider
Published
Slider

The slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider’s current value.

Import statement

import { Slider } from "@progressiveui/react"

Editable Example

<Slider
  min={0}
  max={100}
  step={1}
  value={50}
  onChange={(newValue) => console.log(newValue)}
/>;

Sliders are used to select from a range of values. The min and max props define the range of values, while step determines the intervals between values.

Editable Example

<>
  <Slider min={0} max={100} value={30} disabled />
  <Slider min={0} max={100} value={70} hideTextInput />
</>;

In these examples, the first slider is disabled, and the second one hides the text input. These options provide additional flexibility for different use cases.

Design and Accessibility

The Slider component is designed with accessibility in mind. It is keyboard accessible and includes ARIA attributes for screen readers.

Customization

The appearance of the Slider can be customized with CSS. You can use the provided class names to target elements for styling.

Related

TextInput

Edit this page

References