How to insert touch events into html5 circular slider?

Question

The code works perfectly using mouse events but when switch to touch event or vmouse event, it stopped working.

Here's the link for the mouse event code [https://jsfiddle.net/tk2zd47e/2/ ]

I've tried vmousemove/vmouseup/vmousedown, touchstart/touchend/touchmove and e.preventDefault().

Answer 1

Actually you are trying to create your own circular slider, which is pretty good.

Alternatively you can use the jQuery roundSlider plugin, which is more suitable for your requirement. It supports in Desktop, Mobile and Touch devices also.

This is very flexible and very easy to customize so that you can make any custom appearance as per your wish.

Here i make an demo exactly same as your requirement: jsFiddle

For more details check the demos and documentation page.

Screenshot of the Output: