Geek Answers Handbook

Ui slider after side slider

JQuery ui slider can have one side enter image description here

If the Larger arrow moves to one side, it cannot drag in the opposite direction, how to fix it as soon as the arrow is dragged.

for example, when he reaches 2 can not, to come to 1, he wants to move for 3 or more than 3.

Here is my code:

<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                function update() {
                    var tasks_time = $('#tasks_time').slider('value');
                    var tasks_done = $('#tasks_done').slider('value');
                    var total_cost = (tasks_time * 4 * tasks_done) / (tasks_done * 3);
                    var credits_needed = Math.round((total_cost / 10) + 1);
                    $("#total_cost").text(total_cost.toFixed(2));
                    $("#curr-tasks_time").text(tasks_time);
                    $("#curr-tasks_done").text(tasks_done);
                    $("#credits_needed").text(credits_needed.toFixed(0));
                }
                $("#tasks_time").slider({
                    value: 1,
                    min: 0,
                    max: 72,
                    step: 1,
                    slide: function() {
                        update();
                    }
                });
            });
        </script>
        <style>
            .ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
            .ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
            .ui-slider { position: relative; text-align: left; }
            .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
            .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
            .ui-slider-horizontal { height: .8em; }
            .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
            .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;  }
            .ui-slider-horizontal .ui-slider-range-min { left: 0;  }
            .ui-slider-horizontal .ui-slider-range-max { right: 0;}
        </style>
    </head>
    <body>
        Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours
        <div id="tasks_time">
        </div>
    </body>
</html>

Jsfiddle

+4
source share
1 answer

I updated your script with the following logic:

  • Register starting valuewhen dragging the slider,
  • When a slip, check, over whether current value starting value,
  • If current valueless starting value, then lock the slider.

. : http://jsfiddle.net/EAaLK/906/

$(document).ready(function(){

        function update() {
            var tasks_time = $('#tasks_time').slider('value');
            var tasks_done = $('#tasks_done').slider('value');
            var total_cost = (tasks_time * 4 * tasks_done) / (tasks_done * 3);
            var credits_needed = Math.round((total_cost / 10)+1);
            var startVal; //Register the value when dragging is starting.
           $("#total_cost").text(total_cost.toFixed(2));
            $("#curr-tasks_time").text(tasks_time);
            $("#curr-tasks_done").text(tasks_done);
            $("#credits_needed").text(credits_needed.toFixed(0));

        }

        $("#tasks_time").slider({
            value: 1,
            min: 0,
            max: 72,
            step: 1,
            start: function(e, ui){
                startVal = ui.value;
            },
            slide: function(e, ui) {
                if(ui.value < startVal){
                   //Temporarily disable to slider
                   $(this).slider('disable');
                }else{
                    update();
                }
            },
            stop: function(){
                //Check if slider has been disabled
                if($(this).slider( "option", "disabled" )){
                   //If Yes then reset value to starting value 
                   //and then re-enable slider
                   $(this).slider('value', startVal);                       
                   $(this).slider('enable');
                }
            }
        });


    });
0

More articles:


All Articles