自己写的jQuery拖动滑块

(function ($) {
            $.fn.bnSlide = function (options) {
                var defaults = {
                    colorData: 0, //原始滑道的有效值
                    maxWidth: 10, //整个滑道有效值
                   // Width: 500, //整个容器的宽度
                    //height: 20//整个容器的高度
                };
                options = $.extend(defaults, options);
                if (options.colorData < 0)
                    options.colorData = 0;
                else if (options.colorData > options.maxWidth)
                    options.colorData = options.maxWidth;

                var obj = this;
                var objSlideColor = null; //有效轨道的对象
                var objBlock = null; //滑块对象
                var objPathway = null; //滑道对象

                function print(nowX) {//有效滑道长度colorwidth
                    var nowData = options.maxWidth * nowX / maxPathway;
                    nowData = Math.round(nowData);
                    options.objPrint.val(nowData);
                }
                function blockAddress(nowX) {
                    objBlock.css({ "left": nowX + "px" });
                    objSlideColor.width(nowX);
                }
                /**
                加载插件
                **/
                (function () {
                    var html = "";
                    html += "<div class='bnSlidePathway'>";
                    html += "<div class='bnSlideColor'></div>";
                    html += "</div>";
                    html += "<div class='bnSlideBlock'></div>";
                    obj.addClass("bnSlide").html(html);
                    objSlideColor = $(".bnSlideColor", obj); //有效轨道的长度
                    objBlock = $(".bnSlideBlock", obj); //滑块对象 
                    objPathway = $(".bnSlidePathway", obj);
                })();                

                var objOffset = obj.offset();
                var objLeft = objOffset.left; //滑道的left                     
                var objWidth = obj.width(); //滑道长度               
                var objBlockWidth = objBlock.width(); //滑块宽度
                var maxPathway = objWidth - objBlockWidth; //有效长度
                var colorWidth = options.colorData * maxPathway / options.maxWidth; //红色轨道的实际长度
                objSlideColor.width(colorWidth);
                objBlock.css({ "left": colorWidth });
                options.objPrint.val(options.colorData);

                $(document).on("mouseup", function () {
                    $(document).off("mousemove");
                });

                options.objPrint.on("blur", function () {
                    var nowData = $(this).val();
                    if (isNaN(nowData)) {
                        $(this).css("background-color", "red"); return;
                    }
                    if (nowData > options.maxWidth || nowData < 0) {
                        $(this).css("background-color", "red"); return;
                    }
                    $(this).css("background-color", "white");
                    var nowX = nowData * maxPathway / options.maxWidth;
                    blockAddress(nowX);
                });

                objPathway.on("click", function (event) {
                    var pointX = event.clientX;
                   var maxLeft=maxPathway+objLeft;
                   var nowX=0;
                   if(pointX>=maxLeft) nowX=maxPathway;
                   else nowX = pointX - objLeft;

                    blockAddress(nowX);
                    print(nowX);
                });

                objBlock.on("mousedown", function (event) {
                    var pointX = event.clientX; //鼠标坐标x,距浏览器
                    var blockX = $(this).offset().left; //滑块的left
                    var pointInBlockW = pointX - blockX; //鼠标在滑块的横向位置  
                    $(document).on("mousemove", function (event) {
                        pointX = event.clientX; //鼠标坐标
                        blockX = objBlock.offset().left; //滑块左坐标
                        var nowX = pointX - pointInBlockW - objLeft; //滑块的新坐标x,相对坐标;鼠标绝对坐标-鼠标在滑块中的位置-最外层left
                        if(pointX>=(objWidth+objLeft)){//如果鼠标超出滑道的最右边,取最大值
                            blockAddress(maxPathway);
                            print(maxPathway);
                        }  
                         else if(pointX<=objLeft)//如果鼠标超出滑道最左边,取最小值
                         {
                         blockAddress(0);
                         print(0);
                         }                                        
                        else  if (nowX >= maxPathway) {//如果滑块的当前距离大于等于有效滑道距离,不运动
                             return;
                        }
                        else if (nowX <= 0) {//如果滑块的当前距离小于0,不运动
                             return;
                        }
                        else {
                            blockAddress(nowX);
                            print(nowX);
                        }
                    });
                })
            }
        })(jQuery);

css部分:

.bnTest { left: 100px;width: 500px; height: 20px;  }
        .bnSlide { width: 500px; height: 20px; position: relative;}
        .bnSlide .bnSlidePathway { background-color: Black; height: 10px; width: 100%; position: relative; top: 5px;  border-radius:20px;}
        .bnSlide .bnSlidePathway .bnSlideColor { background-color:#52c2ec; width: 100%; height: 100%; border-top-left-radius:20px; border-bottom-left-radius:20px }
        .bnSlide .bnSlideBlock { background-color: Gray; width: 20px; height: 20px; position: absolute; top: 0; left: 0; cursor: pointer; border-radius: 5px; }

插件的调用:

 $(function () {
            $(".bnTest").bnSlide({ colorData: 2, objPrint: $(".bnSlideOutPrint") });
        });

HTML部分:

<input type="text" class="bnSlideOutPrint" />
<div class="bnTest"></div>

 界面效果: