My Twitch extension (built with React) uses a horizontal slider for user input. On the Twitch desktop site, the slider can be successfully dragged left and right to change its value. But, on the Android mobile application (I can’t currently test on iOS), the slider can only be dragged a short distance, one or two “ticks”, before it stops moving altogether.
I’ve tried this with the Material UI slider, the Material UI base (unstyled) slider, and the “react-slider” and “rc-slider” npm projects, with the same results for all. This happens even when the slider is the only thing being rendered by my extension.
An odd behavior with these sliders, is that if I touch down on the slider knob, and then first drag my finger vertically out of the slider area, the slider will begin dragging properly, even when I move my finger back into the slider area.
Also, if I create a vertically oriented slider, it drags just fine.
Finally, if I spoof desktop mode on mobile for the Twitch website, the sliders also work fine, so it doesn’t appear to be an issue with the touch interface, and seems to be specific to the Twitch application.
Is there anything special about the Twitch mobile application environment that could cause an issue like this with a horizontal slider?
Your best bet here is to seek help from those library developers and see if they can narrow down the fault to determine if it’s the library or Twitch.
As they probably under the hood do the same thing to create the draggable elements and it’s a problem in their core. Since the web UI’s don’t differ that much between android/iOS that Twitch uses to my knowledge.
So far I’ve not had a need for such an item, so I wonder if you need such a UI on mobile in general and something more optimised should be used?
We are running into the same issue, just like OP it happens specifically on the Android app.
There have been some old threads that also reference this behaviour.
e.g: Pan (touchmove) not working in mobile extension
I have tried a super bare-bones demo, where I use the browser’s pointermove event to log out the X coordinates of the pointer-device. It stops after I move my finger roughly 10px horizontally (vertically is fine). This is like 4 lines of code, no libraries were involved
Sounds like you did the work to narrow down that the library people would of done
And you probably need a github issue and then to await a fix, not sure if it’s an issue with whatever android is using to draw with or the twitch app or something else.
Apparently we have worked on different types of applications. Sliders are a pretty standard UI element for dialing in settings, although perhaps not as common as some. I wouldn’t consider requiring the user to tap a button several times to quickly change a value (as is needed in my extension), or to be required to type it in (with a keyboard overlapping much of the content) to be optimized from a UX perspective.
For what it’s worth, spoofing a desktop browser in order to load the twitch desktop site with extension on Android, and having it work fine, indicates that the Twitch environment is worth looking into, and I’d be happy to do any testing to narrow this down. (I’ve already spent all day fiddling with the sliders under the assumption that there’s nothing wrong with the Twitch environment, so I wanted to see if this was a known issue before I start intercepting events or rolling my own).
You wanna give 1? 5? 25? 50? 100? and gives the free text entry field for users to choose themself
Ie The quick access to common options that you expect a viewer to use. Which then makes it quicker for the user to make selections. Or throw in a number pad to press instead of a slider. (which can account for any android device limitations since android can be a mess due to so many different devices and OS installs but I digress)
But if this works for you, that depends on what you are getting the user to pick for sure naturally.
And I’ve just not needed one in an extesnion (mobile view) as yet, since the only thing I need to slider (so far) is volume. And sounds is basically a no go on mobile since you have to close/leave the extension and that stops sounds being playable so I omit the control on mobile all together. (thats before we discuss the primary sound channel being paused to run another sound)
As those I’ve have built our design went “quick access options” first, user custom latter. For things like “spawn x number of enemies in game for y bits” thats a fixed x/y ratio for example
I see what you mean, my concern is that as a Twitch Plays, my extension has a countdown where viewers have a limited time to enter a value, and that value can be highly granular. But, users may also want to fine tune it. (That interface should be live on my stream right now, actually.)
In fact, your solution is one that I have considered, and which may end up being a part of the final design, in order to provide “shortcuts” to avoid using the slider. (in addition to --, -, +, and ++ buttons to tweak the slider up and down, which is not yet deployed) Basically I need to make the countdown as quick as possible to keep viewers engaged, while also making the interface user friendly enough to allow users to enter values comfortably within the countdown, which is definitely a work in progress. (but I can speak from experience that dialing in juuust the right poker bet is something some users will want to do)
For the time being I may just go with a vertical slider on mobile since it’s kind of like a stack of poker chips
Sounds like something worthy of an a/b split test to see which tracks better with viewers.
Or offer both and see what users go for.
Or look at what games outside of twitch do for this on mobile.
I could see a UI of different buttons of +/- 100/50/10/5/1 so 10 buttons and then just add/remove currency for users to quickly get to there target bet.
Like I gave supermarket sim a go recently and when a customer pays with money the till UI is all “pick a note/coin to give to the customer as change” that sort of UI?
Should be just as fast as if a users wants 99? well thats a 100 then -1 for example.
I ran into this too on my extension, I just changed the slider to +/- buttons for the mobile view and panel uses a slider to get around. This has been an issue for years now
I found this issue from 2020 and added some info, it appears that the ability to swipe/drag horizontally between different extension panels is what is causing it.
