#slider_container{ width: 350px; height: 25px; border: 1px solid; float: left; } #slider_handler{ width: 50px; height: 25px; background-color: #FB9CC5; } #slider_value_container{ float: left; width: 60px; margin: 0 5px; }
$(function() { $( "#slider_handler" ).resizable({ minWidth:50,maxWidth: 350,maxHeight:25,minHeight:25 }); $("#slider_handler").resize(function() { $("#slider_value").val($("#slider_handler").width()-50); if(parseInt($("#slider_value").val()) == '0'){ $('#slider_handler').css('background-color','#FB9CC5'); }else{ $('#slider_handler').css('background-color','blue'); } }); $("#slider_value").keyup(function() { if(parseInt($("#slider_value").val()) <= 300){ $("#slider_handler").width(parseInt($("#slider_value").val()) + parseInt(50)); } else{ alert("Value Should Be Between 0-300"); } if(parseInt($("#slider_value").val()) == '0'){ $('#slider_handler').css('background-color','#FB9CC5'); }else{ $('#slider_handler').css('background-color','blue'); } }); });
Follow Us On Facebook