3

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().

Soundar
  • 2,569
  • 1
  • 16
  • 24
Stephen
  • 79
  • 9

1 Answers1

3

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:

round slider color picker - jquery plugin

Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Is it possible to use 2 different events? E.g. The circle be using change event while the numbers in drag event. – Stephen Jul 24 '15 at 02:54
  • Yes, you can use both change and drag event.. Are you expecting like this ? http://jsfiddle.net/soundar24/LpuLe9tr/13/ – Soundar Jul 24 '15 at 08:03
  • Oh yes, that's what I am expecting. I should have realised that I should put a comma right after every event. – Stephen Jul 27 '15 at 01:38