jQuery UI slider 跳转

Question

I've created a simple slider with jQuery UI and I must have set something up a little wrong. It works, but when you click on the slider handle, then move your mouse down slightly, the slider jumps several pixels.

I have an example here: http://jsfiddle.net/pLJE8/3/

Anyone know how to remedy this?

Thanks!

Answer 1

I just had the same problem. I was trying out the time range sample from this site

After some testing I ended up with this code.

<script type="text/javascript">
    $(document).ready(function () {
        $(".slider-timerange").slider({
            range: true,
            min: 0,
            max: 1439,
            values: [540, 1020],
            step: 5,
            slide: function (event, ui) {
                var val0 = ui.values[0];
                var val1 = ui.values[1];
                slideTime(val0, val1);
            }
        });

        var initialVal0 = $("#slider-timerange").slider("values", 0);
        var initialVal1 = $("#slider-timerange").slider("values", 1);
        slideTime(initialVal0, initialVal1);
    });

    function slideTime(val0, val1) {
        var minutes0 = parseInt(val0 % 60, 10);
        var hours0 = parseInt(val0 / 60 % 24, 10);
        var minutes1 = parseInt(val1 % 60, 10);
        var hours1 = parseInt(val1 / 60 % 24, 10);
        var startTime = getTime(hours0, minutes0);
        var endTime = getTime(hours1, minutes1);
        $("#time-range").text(startTime + ' - ' + endTime);
    }
</script>

It seems like doing the following call is the sinner which causes the jumping.

var val0 = $("#slider-timerange").slider("values", 0);

PS: I'm not a javascript wiz;)

Answer 2

You just need to set margin left half of width

.ui-slider .ui-slider-handle{ //for vertical
    height: 30px;   
    margin-bottom:-15px;
}
.ui-slider .ui-slider-handle{ //for horizontal
    width: 30px;   
    margin-left:-15px;
}

and set css acordingly.