Slider not responsive in mobile view

[baronoam]

I'm using Slider component, and when moving to mobile view the slider is not responsive to the slide, only to sporadic click on the slider bar.

What version of rsuite are you using?

4.8.5

What version of React are you using?

16.13.1

What browser are you using?

Chrome

Describe the Bug

I'm using Slider component, and when moving to mobile view the slider is not responsive to the slide, only to sporadic click on the slider bar.

Expected Behavior

slider should react to sliding by touch

To Reproduce

change the web view to mobile screen

[simonguo]

Currently rsuite does not adapt to the mobile, it is recommended to use it in desktop browser applications.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ammesonb]

I have this issue myself, and was able to patch in support through an admittedly-rickety hack. You can set up a hook on component load to identify the rs-slider-handle class (using refs, jquery, etc) and then watch for touchstart/move/end events. Using that information, you can then create a corresponding new mouse up/move/down event with the appropriate properties, and dispatch it to the handle element. It looks something like this:

const handle = rangeSliderRef.current.getElementsByClassName(
    'rs-slider-handle',
)[0];

handle.addEventListener('touchstart', (e: TouchEvent) => {
    const dragEvent = new MouseEvent('mousedown', {
        bubbles: e.bubbles,
        button: 0,
        cancelable: e.cancelable,
        clientX: e.touches[0].clientX,
        clientY: e.touches[0].clientY,
        screenX: e.touches[0].screenX,
        screenY: e.touches[0].screenY,
    });

    handles.dispatchEvent(clickEvent);
});

Note that for touchend you will need to use changedTouches, since on release there are no touch entries in the event.