Skip to contentSkip to navigationSkip to topbar
Figma
Star

Slider

Version 3.0.1GithubStorybook

A Slider is a draggable input that allows a user to select an imprecise numerical value within a range.

Installation

Installation page anchor
yarn add @twilio-paste/core - or - yarn add @twilio-paste/slider
import {Slider} from '@twilio-paste/core/slider';

const Component = () => {
  const [value, setValue] = React.useState(10);
  const sliderId = useUID();
  const helpTextId = useUID(); // optional

  const numberFormatter = React.useMemo(() => {
    return new Intl.NumberFormat('en-US', {style: 'percent'});
  }, []);

  return (
    <Slider
      id={sliderId}
      aria-describedby={helpTextId}
      value={value}
      minValue={0}
      maxValue={100}
      step={1}
      onChange={(newValue) => setValue(newValue)}
      numberFormatter={numberFormatter}
    />
  );
};

Slider

Slider page anchor

id RequiredRequired

Must provide an id to match with a label

Type
string

aria-describedby

Optional id to pair the input to its help text

Type
string

aria-labelledby

Optional id to pair the input to its label text (if not using a regular label with htmlFor)

Type
string

disabled

Disables the slider

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SLIDER

hasError

Shows error styling on the Slider

Type
boolean

hideRangeLabels

Hides the min and max values that appear over the slider

Type
boolean

i18nMaxRangeLabel

Used to internationlize the max range label.

Type
string
Default
Maximum value:

i18nMinRangeLabel

Used to internationlize the min range label.

Type
string
Default
Minimum value:

maxValue

The largest number in the slider range

Type
number
Default
100

minValue

The smallest number in the slider range

Type
number
Default
1

numberFormatter

Used to adjust how the numbers are rendered and interpreted. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Type
NumberFormat

onChange

Fired on every change as the thumb is dragged along the track.

Type
(value: number) => void

onChangeEnd

Fired at the end of the dragging event once.

Type
(value: number) => void

step

The incremented value as you drag along the range

Type
number

value

The current selected value

Type
number
Default
1