javascript - Jquery ui slider move to the next value -


here's sample image of i'm trying accomplish

enter image description here

say click 150 value handle should move 50 , not jump 150. click again move 50 100.

the other way around, handle on value 150 click on value 5, should not jump directly 5 should move 150 100.

how can that?

here's code:

var valmap = [5, 10, 20, 50, 100, 150]; value = 0; var slider = $("#slider").slider({     disabled: false,     animate: true,     min: 0,     max: valmap.length - 1,     slide: function (event, ui) {         slider.slider("option", "animate", "slow");      },     change: function () {          var slideval = $(this).slider('value');         console.log(slideval, value)         if(value < slideval) {             console.log("incremented")         } else if(value > slideval) {             console.log("decremented")         }         value = slideval;     } }); 

here's sample jsfiddle: http://jsfiddle.net/endl3ss/jnwww/21/

i don't know slider much, here working solution based on specification:

http://jsfiddle.net/5xmmz/11/

and here full code reference

    var valmap = [5, 10, 20, 50, 100, 150,500,1000,5000];     value= 0;     var lastslidevalue = 0;     var internalslidecalling = false;      var slider = $("#slider").slider({     disabled : false,     animate : true,     min : 0,     max : valmap.length - 1,     slide : function(event, ui) {         slider.slider("option", "animate", "slow");     },     change: function(){          var slideval = $(this).slider('value');          if (!internalslidecalling)         {             if (slideval>lastslidevalue && lastslidevalue < $(this).slider('option','max'))             {                 slideval = lastslidevalue+1;             }             else if (lastslidevalue > $(this).slider('option','min'))             {                 slideval = lastslidevalue-1;                             }             lastslidevalue = slideval;         }          console.log(slideval, value)          if(value < slideval) {           console.log("incremented")         } else if(value > slideval){           console.log("decremented")         }         value = slideval;          if (!internalslidecalling){             internalslidecalling = true;             $(this).slider('value',slideval);         }         else              internalslidecalling = false;     } });  $("#slider").slider('values',valmap); 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -