CODEWITHSUNDEEP
reactjsmaterial-ui
Aniruddha Bera
Aniruddha Bera

Reputation: 417

Slider is not changing value

Got a material-ui slider wired to an audio element. The value of it is hooked with the state and when the audio plays the value changes as expected. But however I am not able to click and drag the slider.

audioIsPlaying = (e) => {
    this.setState({ currentTime: Math.floor(e.target.currentTime) });
  };

 render() {

 return (
     <audio
            onLoadedMetadata={(event) => this.audioWasLoaded(event)}
            onEnded={(event) => this.audioEnded(event)}
            onTimeUpdate={(event) => this.audioIsPlaying(event)}
            src={this.props.url}
            ref={this.audioRef}
          />

 <Slider
            className="top"
            value={(this.state.currentTime * 100) / this.state.duration}
            aria-labelledby="continuous-slider")/>
)
}

Upvotes: 0

Views: 349

Answers (1)

ludwiguer
ludwiguer

Reputation: 2245

You need to update the value in the onChange function

const handleChange = (event, newValue) => {
  this.setState({ currentTime: newValue) });
};

<Slider value={(this.state.currentTime * 100) / this.state.duration} onChange={handleChange} />

Upvotes: 1

Related Questions