jquery slider snap to all values instead of jumping to a clicked value
<p>I have utilized the jquery ui(<a href="http://jqueryui.com/slider/#steps" rel="nofollow">http://jqueryui.com/slider/#steps</a>) and made some changes to the code to fit my needs.</p>

<p>I'm trying to make something like this,</p>

<p><img src="http://i.stack.imgur.com/cwLiS.png" alt="enter image description here"></p>

<p>Right now I'm working with the functionalities and work on later with the user interface.</p>

<p>I'm trying to make the slider to snap to all values instead of jumping to where the mouse is clicked. For example the handle on the slider is on the very left end, when i click the slider on the right end it will jump to where the mouse is clicked, I don't want this to happen. I want the slider to follow the values on the array from array[0] to array[19] or array[19] to array[0].</p>

<pre><code>var valMap = [10,9,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10]; //10x optical zoom WIDE/TELE
</code></pre>

<p>When the handle is on left end array[0] which is equal to 10 and when i click on the array[19] right end it should not jump to array[19] it should start with array<a href="http://i.stack.imgur.com/cwLiS.png" rel="nofollow">1</a> which is 9 then click again array[2] which is 8 and etc.</p>

<p>It should be in order and not jumping.</p>

<p>10,9,8,7,6,5,4,3,2,1 &lt;--- LEFT END which is zoom out(WIDE)</p>

<p>1,2,3,4,5,6,7,8,9,10 &lt;--- RIGHT END which is zoom in(TELE)</p>

<p>Even when I click to any parts of the slider it should follow the order and not jump to where the mouse is clicked.</p>

<p>Slider sample for zooming in</p>

<p>&amp; = slider handle</p>

<p>^ = mouse click</p>

<pre><code>W &amp; - - - - - - - - - - - - - - ^ - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10


W - &amp; - - - - - ^ - - - - - - - - - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10
</code></pre>

<p>See how the handle moved from 10 to 9 and not jump to 6 where the mouse is clicked.</p>

<p>click again:</p>

<pre><code>W - - &amp; - - - - - - - - - - - - - - - - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10
</code></pre>

<p>Slider sample for zooming out</p>

<pre><code>W - - - - ^ - - - - - - - - - - - - - - &amp; T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10


W - - - - - - - - - - - ^ - - - - - - &amp; - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10
</code></pre>

<p>click again:</p>

<pre><code>W - - - - - - - - - - - - - - - - - &amp; - - T  
 10 9 8 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8 9 10
</code></pre>

<p>Here's my code:</p>

<pre><code>&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;jQuery UI Slider - Snap to increments&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  &lt;script&gt;

  $(document).ready(function() {
    var valMap = [10,9,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10]; //10x optical zoom WIDE/TELE
    var slider = $( "#slider" ).slider({
      disabled: false,
      animate: true,
      min: 0,
      max: valMap.length-1,
      values: [10],
      change: function( event, ui ) {
        $( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
        slider.slider("option", "disabled", true);
        slider.slider("option", "animate", "slow");
        setTimeout(ENABLE, 3000);
      },
      stop: function(event, ui){
        if(ui.value == 10){
          alert("Default ZOOM");
        }
        if(ui.value &lt; 10){

          WIDE();


        }
        if(ui.value &gt; 10){

          TELE();
        }
      }
    });
$( "#zomlevel" ).val( "x" + $( "#slider" ).slider( "value" ) );
    function WIDE(){
      $.post( 
                'cntr_L.php', 
                { cmd: "OUT" }, 
                function( data ){  

                $( 'body ').append( data );

                });
    }

    function TELE(){
      $.post( 
                'cntr_L.php', 
                { cmd: "IN" }, 
                function( data ){  

                $( 'body ').append( data );

                });
    }

    function ENABLE(){
      slider.slider("option", "disabled", false);
    }

  });

  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;
  &lt;label for="zoom"&gt;ZOOM CONTROLLER(W/T)&lt;/label&gt;
  &lt;input type="text" id="zomlevel" style="border: 0; color: #f6931f; font-weight: bold;" /&gt;
&lt;/p&gt;

&lt;div id="slider"&gt;&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>How can I make it work like that?</p>

<p>Here's a jsfiddle: <a href="http://jsfiddle.net/endl3ss/sqsCV/" rel="nofollow">http://jsfiddle.net/endl3ss/sqsCV/</a></p>
