Javascript jQuery双范围滑块重新加载

我想自己在jQuery中构建一个双范围滑块。 我的第一次尝试是一种作品。但有时，如果我在拖动幻灯片后释放鼠标按钮，网站会自动重新加载。 我已经在JSFIDLE上上传了我的代码：

以下是js部分：

$(document).ready(function () {

    var $dragging = null;

    $('.slider').bind("mousemove", function(e) {
        if ($dragging) {
            if (e.pageX<200) {
                $dragging.offset({
                    left: e.pageX
                });
            }

        }
   });

    $('.left_slider').bind("mousedown", function (e) {
        $dragging = $(e.target);
    });

    $('.right_slider').bind("mousedown", function (e) {
        $dragging = $(e.target);
    });

    $('.slider').bind("mouseup", function (e) {
        $dragging = null;
    });
});

$（文档）.ready（函数（）{
var$draging=null；
$（'.slider'）.bind（“mousemove”，函数（e）{
如果（$拖动）{
如果（e.pageX因为你的锚（它们甚至需要成为锚吗？）没有
href
值（这是无效的，顺便说一句），默认操作是重新加载当前页面。你需要使用
preventDefault
停止该操作，或者使用
#
或
javascript:void（0）
等值





下面是使用
preventDefault
的方法。这要归功于Joe Cullinan

请在小提琴中使用TidyUp按钮并按照建议操作。这会使演示更简单。这是最好的解决方案，但如果出于某种原因，您想对其中一个按钮应用
href
，这里有一个。基本上，在mouseup/mousedown事件触发后，会触发默认事件。在这种情况下，由于clickable对象是
s，在鼠标按下/mousedown后，它们将导致浏览器导航。通过将e.preventDefault（）放入事件处理程序，可以指示浏览器停止因事件“冒泡”而触发的任何后续事件。
<a href="#" class="left_slider"></a>
<a href="#" class="right_slider"></a>