jquery ui slider locate next array when clicked on the track
<p>I have an array </p>

<pre><code>valmap = [5,4,3,2,1,0,1,2,3,4,5];
</code></pre>

<p>Now for example the handle of the slider is on track array[5] which is 0, handle is on the center of the track. When I click on the track array[0] which is 5 the handle should only move to track array[4] which is 1 and not go directly to the end of the track which is array[0] or equals to 5. </p>

<p>It should locate the nearest array. e.g handle is on array[5] is center which have a value of 0. When click on the left track it should find the nearest array and that should be array[4] which have a value of 1. </p>

<p>Again when I click on the track, Now I will click on the right side of the track the handle should move back to array[5] which is the center of the slider which is equal to 0.</p>

<p>How can I do that?</p>

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

<pre><code>$(document).ready(function() {
    var valMap = [5,4,3,2,1,0,1,2,3,4,5]; //0 is the default camera zoom
    var slider = $( "#slider" ).slider({
      disabled: false,
      animate: true,
      min: 0,
      max: valMap.length-1,
      values: [5],
      slide: function( event, ui ) {
        $( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
        slider.slider("option", "animate", "slow");        
      }
    });
});
</code></pre>

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

<p>EDIT ADDED EXPLANATION:</p>

<p>For example I click on the left side of the track and the handle is on the center, the handle should not jump directly to the left side of the track where I click the mouse, it should look for the next array and move there instead of jumping to the end of the array.</p>
