javascript - Jquery ui slider move to the next value -
here's sample image of i'm trying accomplish
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:
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
Post a Comment