score:6

Accepted answer

If you replace defaultValue with the value prop, and update your <label> elements style as shown below, then your component will work as expected:

function App() {
  const [slider, setSlider] = useState(20);

  const handleChange = (e) => {
    setSlider( e.target.value );
    console.log(slider);
  }

  return (<div className="container">
        {/* Format valid value for fontSize property */ }
        <label style={{ fontSize: `${slider}px` }}>Example range</label>

        {/* Supply slider state via value prop rather than defaultValue */ }
        <input 
          type="range" 
          className="custom-range" 
          id="customRange1"
          min="10" 
          max="30"
          value={slider}
          onChange={handleChange}
        /> 
    </div>
  );
}

See this link for relevant documentation discussing form/inputs elements that have a value prop specified (referred to as "Controlled components")

score:0

Example range If you mention without unit it will take the bydefault fontsize.In your case the fontsize is updating in slider but that is not usable because unit is missing.

score:1

const [slider, setSlider] = useState(20);

Here, you are assigning Number to slider and then updating it with string (console.log(typeof e.target.value)) i.e. you are changing data type of something, which is not good practice to code. Because it may affect your code, if you are dependent on it(slider) at more than one places, your program may break and you would never find such mistakes, follow good coding practices.

Try using setSlider(Number(e.target.value)); instead of setSlider(e.target.value);

https://codesandbox.io/s/pedantic-black-x6uzx

score:5

You miss the unit here,

<label style={ { fontSize: `${slider}px` } }>Example range</label>

Demo


Related Query

More Query from same tag