title: jquery UI Slider custom control volume image does not change if we i click on the slider bar
body: <p>I am using jquery UI slider for volume control. </p>
  
  <p>Here's the link : <a href="http://media02.hongkiat.com/jquery-ui-slider/demo/index.html" rel="nofollow">http://media02.hongkiat.com/jquery-ui-slider/demo/index.html</a></p>
  
  <p>Tutorial on this demo: <a href="http://www.hongkiat.com/blog/jquery-volumn-slider/" rel="nofollow">http://www.hongkiat.com/blog/jquery-volumn-slider/</a></p>
  
  <p>When you drag the slider, the volume icon changes accordingly ( as set using background image positions )</p>
  
  <p>But the trouble is when you click on the slider bar instead of dragging, the volume icon takes up strange background positions. ( test by clicking multiple times at different points of the slider )</p>
  
  <p>How to fix this ?</p>
  
  <p>Any help, appreciated. </p>