CODEWITHSUNDEEP
javascriptreactjseventsreact-hooksjsx
Paul
Paul

Reputation: 25

My volume slider functions but the button just stays in one place. Why?

I'm using this function above the return. The div (below) is in the return. The result that I get is a volume slider that functions. However, visually the slider button never moves. How can I fix this to make the button show where the volume is?

const Component = () => {
  const setVolume = (e) => {
    audioRef.current.volume = e.target.value / 100;
  };

  return (
    <div className="volumeControl">
      <button onClick={() => audioMute()}> Mute </button>{" "}
      <input
        min={0}
        max={100}
        value={50}
        step={1}
        onChange={setVolume}
        type="range"
      />
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 0

Views: 81

Answers (3)

Behemoth
Behemoth

Reputation: 9330

Why dont you use useState()? I think it's better for your case since you only need the volume value. Also you can set the initial volume there. useState(50). Try this code:

const Component = () => {
  const [volume, setVolume] = React.useState(50);
  const handleVolumeChange = (e) => {
    console.log(e.target.value);
    setVolume(e.target.value);
  };

  return (
    <div className="volumeControl">
      <button onClick={() => audioMute()}> Mute </button>{" "}
      <input
        min={0}
        max={100}
        value={volume}
        step={1}
        onChange={handleVolumeChange}
        type="range"
      />
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 0

ajay 24
ajay 24

Reputation: 329

As value is variable try to store it in the local state using useState hook

let [range, setRange] = useState(50)
const setVolume = (e) => {
   setRange(e.target.value / 100)
}

return(
<div className="volumeControl">
    <button onClick={() => audioMute()}>Mute</button>
    <input 
        min={0} 
        max={100} 
        value={range} 
        step={1}
         onChange={setVolume} 
        type="range"
    />
</div>
)

or

I think you are missing the ref attribute for an input element

import { useRef } from 'react';
....
let audioRef = useRef()

   <input 
        min={0} 
        max={100} 
        value={50} 
        step={1}
         onChange={setVolume} 
        type="range"
        ref ={audioRef}
    />

Upvotes: 0

Draeken
Draeken

Reputation: 380

The button never moves because its value is fixed to 50. You could use the defaultValue attribute instead of value. Value is used with controlled component and should be bound to local state.

Upvotes: 1

Related Questions