Question

我用jQuery UI创建了一个简单的滑块，我必须设置一些有点错误。它可以工作，但当你点击滑块手柄，然后稍微向下移动鼠标，滑块会跳过几个像素。

任何人都知道如何解决这个问题？

谢谢！

Answer 1

我遇到了同样的问题。我正在尝试this site

的时间范围样本

经过一些测试后，我最终得到了这段代码。

<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>

似乎做以下的召唤是导致跳跃的罪人。

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

PS：我不是javascript wiz;）

Answer 2

你只需要设置宽度的左半部分

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

并依次设置css。

jQuery UI滑块跳转

2 个答案: