Skip to content

Slider

Basic

Controll the slider with the value prop.

const SliderBasic = () => {
  return (
    <Slider defaultValue={[66]} max={100} step={1}>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb />
    </Slider>
  );
};

Controlled

const SliderControlled = () => {
  const [value, setValue] = useState([66]);
  return (
    <Fragment>
      <Slider value={value} max={100} step={1} onValueChange={setValue}>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb />
      </Slider>
      <Text>Slider Value: {value}</Text>
    </Fragment>
  );
};

Slider Value: 66