How to insert touch events into html5 circular slider?
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().
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:
- WebTorrent : TypeError: Cannot read properties of undefined (reading 'find')
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- window.onload vs $(document).ready()
- How to export multiple components from an index file in React?
- Button doesn't have obvious onclick event
- Vue3 Carousel as ES module in Laravel blade template
- Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings
- 3rd party cookies in Android 14/New Chrome using Angular/Firebase Auth/Hosting and NodeJs in Server
- How to replace host part of a URL using javascript regex
- uncaught typeerror: cannot read properties of undefined (reading 'removeeventlistener')
- Get logarithmic byteFrequencyData from Audio
- TypeError: Cannot set property 'innerHTML' of null with a correct script location and div ID
- React how to Pass data from component to its sub-component
- Exiting While loop
- Iterate through an array and copy certain values
- Count the number of occurrences of a character in a string in Javascript
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- Apex Charts JS fill to size
- Using glob with the aspect-build bazel-examples repository typescript build?
- How to split an array and put values to observable-block?
- Converting svg path to polygon in javascript
- Output one json record react native
- Jest - TypeError: response.json is not a function
- smooth auto scroll by using javascript
- Finding JavaScript memory leaks with Chrome
- Can't show icon with fontawesome's react-js library
- Overriding control+s (save functionality) in browser
- Cypress - How to check if a checkbox is checked or not?
- Converting CSS hover event to javascript Click event
- New subscriptions always returning intial value instead of current value