CODEWITHSUNDEEP
javascripthtmlcssslidertouch
ambition10
ambition10

Reputation: 1

Javascript slider changes behavior when using zoom css property

We have a a circular slider built with javascript and css. We need the slider to support touch and mouse events. The slider respond to mousemove/touchmove events properly. It still acts as expected when zooming in/out using Chrome zoom functionality, but it starts to act weird when we add and manipulate Zoom css property within its container.

Working slider: http://jsfiddle.net/sCanr/1/

To reproduce: 1) add (style="zoom:0.5") to the container tag, so it would be:

<div id='container'  style="zoom:0.5"> 
<div id='slider'> </div>
</div>

2) try moving the handler with mouse. (touchmove event produce similar behavior)

Note: we have to work with Zoom css property, as we are inserting our slider into a container maintained by different team, which uses the zoom property.

Upvotes: 0

Views: 322

Answers (1)

Soundar
Soundar

Reputation: 2589

You can simply use the jQuery roundSlider plugin, where the problem was resolved. Also no need to handle lot of codes in the application.

Check the below demo:

DEMO

Upvotes: 0

Related Questions