使用鼠标从头开始使用jquery创建滑块

我正在尝试创建类似以下内容的滑块：

基本上，这个想法与演示中的基本滑块非常相似，不同的是，在用鼠标抓取的手柄中，当你到达某个点时，数字会发生变化。我想我能算出数字部分，但我完全被困在如何开始的问题上

我想用jquery从头开始。。。所以没有插件。如果有人知道任何教程，或者我可以从某个地方开始，那就太棒了

---

谢谢

视情况而定。如果你想了解这些知识，我建议你看看；）

如果因为jQueryUI太“重”而想这么做，那么仅供参考，您可以

编辑

---

尝试：

视情况而定。如果你想了解这些知识，我建议你看看；）

如果因为jQueryUI太“重”而想这么做，那么仅供参考，您可以

编辑

---

试试看：

这就是我所拥有的，而且很有效

//sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 380){
                $('#slider').css('left', 400-20 + "px");    
            }

            $("#slider").text($("#slider").css('left'));

        };


    $(document).mouseup(function(e) {
      $(document).unbind('mousemove', mmHandler);
    });

//设置当前位置和偏移量变量
无功电流位置；
var偏移；
var右偏移量
//在滑块上查找mousedown事件
$（“#滑块”）.mousedown（函数（e）{
//将offset=设置为页面的鼠标坐标-滑块的偏移
偏移量=e.pageX-this.offsetLeft；
控制台日志（“偏移量：+offset”）；
$（document.bind（'mousemove'，mmHandler）；
}); 
var mmHandler=函数（e）{
currentPosition=e.pageX-偏移量；
//获取鼠标当前位置（以分钟表示偏移量）并设置绝对位置
$（'#slider'）.css（'left'，currentPosition+“px”）；
控制台日志（“当前位置：+currentPosition”）；
//检查确认它在盒子里
如果（当前位置=380）{
$（'#slider'）.css（'left'，400-20+“px”）；
}
$（“#滑块”）.text（$（“#滑块”）.css（'left'）；
};
$（文档）.mouseup（函数（e）{
$（文档）.unbind（'mousemove'，mmHandler）；
});

这就是我所拥有的，而且很有效

//sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 380){
                $('#slider').css('left', 400-20 + "px");    
            }

            $("#slider").text($("#slider").css('left'));

        };


    $(document).mouseup(function(e) {
      $(document).unbind('mousemove', mmHandler);
    });

//设置当前位置和偏移量变量
无功电流位置；
var偏移；
var右偏移量
//在滑块上查找mousedown事件
$（“#滑块”）.mousedown（函数（e）{
//将offset=设置为页面的鼠标坐标-滑块的偏移
偏移量=e.pageX-this.offsetLeft；
控制台日志（“偏移量：+offset”）；
$（document.bind（'mousemove'，mmHandler）；
}); 
var mmHandler=函数（e）{
currentPosition=e.pageX-偏移量；
//获取鼠标当前位置（以分钟表示偏移量）并设置绝对位置
$（'#slider'）.css（'left'，currentPosition+“px”）；
控制台日志（“当前位置：+currentPosition”）；
//检查确认它在盒子里
如果（当前位置=380）{
$（'#slider'）.css（'left'，400-20+“px”）；
}
$（“#滑块”）.text（$（“#滑块”）.css（'left'）；
};
$（文档）.mouseup（函数（e）{
$（文档）.unbind（'mousemove'，mmHandler）；
});

我仍然不想使用插件，所以选项2不可用。我确实需要这些知识，但是选项1不需要很多代码。我想如果我搞清楚了阻力和阻力，我就能得到大部分。。。我不知道是否有任何教程没有使用任何类型的插件，我仍然不想使用插件，所以选项2不可用。我确实需要这些知识，但是选项1不需要很多代码。我想如果我搞清楚了阻力和阻力，我就能得到大部分。。。不知道是否有任何教程没有使用任何类型的插件