React HTML range slider doesn't slide

When you just add an HTML input range slider in React like:

<input type="range" id="slider" value="0.3" min="0" step="0.05" max="1" />

The slider doesn’t slide.

Why?

It’s because when you have any <input> with value as a prop, then React expects that you will handle the value yourself.

The fix

The fix is to pass the value to the onChange event and set it as your value.

import { useEffect, useState } from "react";
export default function Demo() {
  const [sliderValue, setSliderValue] = useState(0.3);

  return (
    <>
      <input
        type="range"
        id="slider"
        value={sliderValue}
        min="0"
        step="0.05"
        max="1"
        onChange={(event) => setSliderValue(event.target.value)}
      ></input>
    </>
  );
}

The value that we get from event.target.value is passed to setSliderValue() which will update the sliderValue and thus you can slide your slider now.

If you want more tutorials like this or have questions about this tutorial, follow me on Twitter. Also if you want to receive it in your email, subscribe to the newsletter! Thanks for your time!