I’ve been trying to use an MUI slider in a Twitch extension, which is React code displayed within the Twitch application (I’m testing on Android).

I can change the value of the slider by tapping a location on the slider’s track. But, when I touch and drag the slider thumb along the track, the slider will only move a short distance once or twice before it stops moving altogether.

The strange thing is that if I touch down on the slider thumb and drag my finger vertically outside the region of the slider component before I drag left or right to change its value, the slider will drag properly, even when I move my finger back onto the slider track.

This is only on mobile: on desktop when I’m dragging with a mouse, the slider works as expected, it drags correctly when the mouse pointer is both inside and moved outside the slider track.

I’ve tried having the base application return only a slider and nothing else, with the same behavior.

  const [sliderState, setSliderState] = useState(500)
  
  let onSliderChange = (event) => {
      setSliderState(event.target.value)
  }

  return (
    
    <Slider     track={false}
                size="medium"
                defaultValue={0}
                value={sliderState}
                valueLabelDisplay="off"
                marks={false}
                min={0}
                max={1000}
                onChange={onSliderChange}
                />
  );

This is strange, and it might be a quirk of how Twitch is embedding the React code in their application. But I’m wondering if maybe there’s something I’m missing about touch dragging a slider on mobile.