Is there a way to implement Draggable in React, on a component that has a volume slider?

user_19651476 0
Viewed 53

Currently, if I try to implement Draggable, I can drag my component as intended but when trying to turn the volume up on my volume slider, it drags the component. Is there a good fix for this?

<Draggable>
            {
                show &&
                <div className="musicContainer">
                    <p className="lofi"> Lofi Radio </p>
                        <div className="musicHandler">
                            <div>
                                {props.playing && <p onClick={props.handlePause} ><img src={pausebutton} id="pause_audio" width='30px' height='30px' className='music-img' /></p>}
                                {!props.playing && <p onClick={props.handlePlay} ><img src={playbutton} id="play_audio" width='30px' height='30px' className='music-img' /></p>}
                            </div>
                            <div className='slider-container'>
                                <div>
                                    {props.volume > 50 && <i className='fa fa-volume-up text-white '/> }
                                    {props.volume == 0 && <i className='fa fa-volume-mute text-white' />}
                                    {props.volume <= 50 && props.volume > 0 && <i className='fa fa-volume-down text-white' />}
                                </div>
                                <input
                                    Draggable={false}
                                    className='volume-range vrange'
                                    id="musicSlider"
                                    // style={{width: "100%", margin: "0 3px"}}
                                    type="range"
                                    min={0}
                                    max={100}
                                    value={props.volume}
                                    onInput={(e) => props.handleVolumeChange(e)}
                                />
                            </div>
                        </div>
                        {/* <div className="volume-buttons">
                            <button className="math-operator"> &#x2212; </button>
                            <button className="math-operator" onClick={increase}> &#x2b; </button>
                        </div> */}
                </div>
            }
            </Draggable>**strong text**
reactjs draggable
1 Answers

You should stop the event propagation when click the input

const onMouseDown = (e) => {
  e.stopPropagation();
};

<input onMouseDown={onMouseDown} type="range" />

You can refer my codesandbox

user_116030040
Related