Friday, 15 June 2012

jquery - how to make restriction on bootstrap slider? -



jquery - how to make restriction on bootstrap slider? -

hi friends want create restriction on slider that, current can't less start , more end. or start cant more end , ....

here javascript code,

`$(document).ready(function() { $("#slider").slider({ animate: true, value:0, min: 0, max: 10, step: 1, slide: function(event, ui) { update(1,ui.value); //changed } });

$("#slider2").slider({ animate: true, value:0, min: 0, max: 10, step: 1, slide: function(event, ui) { update(2,ui.value); //changed } }); $("#slider3").slider({ animate: true, value:0, min: 0, max: 10, step: 1, slide: function(event, ui) { update(3,ui.value); //changed } }); //added, set initial value. $("#start").val(0); $("#current").val(0); $("#end").val(0); update(); }); //changed. parameter function update(slider,val) { //changed. now, straight take value ui.value. if not set (initial, utilize current value.) var $start = slider == 1?val:$("#start").val(); var $current = slider == 2?val:$("#current").val(); var $end = slider == 3?val:$("#end").val(); $( "#start" ).val($start); $( "#current" ).val($current); $( "#end" ).val($end); $('#slider a').html('<label> '+$start+' </label>'); $('#slider3 a').html('<label> '+$end+' </label>'); $('#slider2 a').html('<label> '+$current+' </label>'); }`

and have added part it, not working.

$(document).ready(function() { $("#slider").slider({ animate: true, value:0, min: 0, max: 10, step: 1, slide: function(event, ui) { update(1,ui.value); //changed } }); var min1 = $("#slider").min(); $("#slider2").slider({ animate: true, value:0, min: 0, max: 10, values: [min1, 5] step: 1, slide: function(event, ui) { update(2,ui.value); //changed } }); $("#slider3").slider({ animate: true, value:0, min: 0, max: 10, step: 1, slide: function(event, ui) { update(3,ui.value); //changed } }); //added, set initial value. $("#start").val(0); $("#current").val(0); $("#end").val(0); update(); }); //changed. parameter function update(slider,val) { //changed. now, straight take value ui.value. if not set (initial, utilize current value.) var $start = slider == 1?val:$("#start").val(); var $current = slider == 2?val:$("#current").val(); var $end = slider == 3?val:$("#end").val(); $( "#start" ).val($start); $( "#current" ).val($current); $( "#end" ).val($end); $('#slider a').html('<label> '+$start+' </label>'); $('#slider3 a').html('<label> '+$end+' </label>'); $('#slider2 a').html('<label> '+$current+' </label>'); }

could please help me restriction?

thanks

jquery twitter-bootstrap slider jquery-ui-slider

No comments:

Post a Comment