Jquery Horizontal Value Slider
CSS Code
                #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;
                }
Jquery Code
                $(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');
                                }
                        });

                });
HTML Code

Follow Me On Twitter

Advertise Here

Follow Us On Facebook