自己写的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);

.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") });
});

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