Components
Forms
Slider

Slider

Slider

Expand code

Editable Example

import { Slider } from "@wfp/react";

() => {
  return (
    <Slider
      ariaLabelInput="Slider number input"
      helperText="Additional helper text"
      inputType="number"
      labelText="Slider Label"
      max={50}
      min={10}
      name="Form item name (name)"
      step={1}
      value={25}
    />
  );
};
PropDefaultDescriptionValue

disabled

boolean
–

Specify if the control should be disabled, or not

max

number
–

The maximum value.

min

number
–

The minimum value.

name

string
–

The name attribute of the <input>.

placeholder

string
–

Specify the placeholder attribute for the input

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

step

number
–

A value determining how much the value should increase/decrease by moving the thumb by mouse.

value

number |""
–

Specify the value of the input, if undefined or null the value is empty

onChange

(value: number,event: ChangeEvent<HTMLInputElement>) => void
–

A callback function that is called when the value of the slider changes. Provides the new numeric value as its first argument and the original event as the second.

id

string
–

Provide a unique identifier for the control

formItemClassName

string
–

Specify an optional className to be applied to the form-item node

hideLabel

boolean
–

Specify whether you want the underlying label to be visually hidden

minLabel

string
–

The label associated with the minimum value.

maxLabel

string
–

The label associated with the maximum value.

formatLabel

(value: number,label?: string) => ReactNode
–

The callback to format the label associated with the minimum/maximum value.

inputType

string
–

The type attribute of the <input>.

ariaLabelInput

string
–

The ariaLabel for the <input>.

hideTextInput

boolean
–

true to hide the number input box.

fullWidth

boolean
–

Use the width of the parent element

hideControls

boolean
–

true to hide the controls on slider.

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

light

boolean
–

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

On this page

References