1

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

我在这里有一个例子：http: //jsfiddle.net/pLJE8/3/

有谁知道如何解决这个问题？

谢谢！

4

2 回答 2

3

我只是有同样的问题。我正在尝试这个站点的时间范围样本

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

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

于 2013-02-16T15:35:24.563 回答
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。

于 2013-12-21T09:55:31.233 回答