Javascript jQueryUI滑块跳转

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

我举了一个例子：

有人知道如何补救吗

---

谢谢

我也有同样的问题。我试着从样本中找出时间范围

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

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

---

PS：我不是javascript高手；）

我也有同样的问题。我试着从样本中找出时间范围

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

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

---

PS：我不是javascript高手；）

您只需将边距设置为宽度的左半部分

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

您只需将边距设置为宽度的左半部分

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

Hmmm，我正在使用Chrome，它为我跳转。对我来说，问题似乎是我实际上是在创建DOM元素来充当html中的滑块句柄，而允许小部件这样做并使用类（如.ui slider handle）操纵样式似乎是更好的做法。去掉多余的div后，滑块运行平稳。嗯，我使用的是Chrome，它为我跳转。对我来说，问题似乎是我实际上是在创建DOM元素作为html中的滑块句柄，而允许小部件这样做并使用类（如.ui slider handle）操纵样式似乎是更好的做法。摆脱多余的div后，滑块将平滑运行。