I am trying make a slider like here

its working properly on any browser but not on touchsreen like Ipad,

i have tried jQuery UI Touch Punch from here but still not work.

Here my simple JS

Code:
$('#magnify-glass').draggable({ 
            axis: "x", 
            containment: "parent",
            snap: '.snap',
            snapMode : 'inner',
            snapTolerance : 30,
            cursor: 'move',

            drag: function(event, ui) {
                updateImagePosition(event, ui);
            }
        });
and my CSS

Code:
#magnify-glass {


width: 122px;
  height: 121px;
  background: url("images/magnify.png") no-repeat;
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 10;
  display: block;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

#shelf #magnify-glass:hover {
  cursor: pointer !important;
}
Thanks in advance for your help