Components
Forms
Slider

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 "@wfp/react"

Editable Example

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

Fullwidth Slider

Specify fullWidth property to be full to use the width of parent element

Editable Example

<Slider
  fullWidth
  helperText="Additional helper text"
  id="slider3"
  labelText="Slider Label"
  min={0}
  max={100}
  name="Form item name (name)"
  value={50}
/>;

Disabled and hide TextInput

Disable the slider using the diabled prop and also hide the textinput by using the hideTextInput prop. 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.

Editable Example

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

Related

TextInput

On this page

References