Slider

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}
    />
  );
};