Slider

Import statement

import { Slider } from "@wfp/react"

<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

<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.

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

Related

TextInput