自制 滑动条 组件；

/*
//方法调用 说明
var slider = new sliderComp({
    $parent: $box.find('.control-slider-comp'), //载体
    minStep: 30, //最小值
    maxStep:100,//最大值
    currentStep: 50, //当前值
    callback: function (res) { // 回调 返回的是 选择的值
    }
 });
 //也可以 slider.getResult()  获取选择的值
 */
/**
 * 滑动条 组件
 */
function sliderComp(config) {  //config.callback  回调
    if (!config.$parent) {
        throw '滑动条组件 所需的 $parent 参数为空';
    }
    config.$parent = config.$parent instanceof jQuery ? config.$parent : $(config.$parent);// 载体 容器 不能为空

    if (config.$parent.length === 0) {
        throw '滑动条组件 所需的 容器，载体为空，选择器：' + config.$parent.selector;
    }

    var _sliderComp = this;
    var doc = document, win = window, m = Math, maxStep = 300, minStep = 0;

    this._currentStep = config.currentStep || 0; //当前  步数

    config.minStep = !config.minStep ? minStep : m.max(minStep, m.min(maxStep, config.minStep)); //最小 步数  0-300  默认为0
    config.maxStep = !config.maxStep ? 100 : m.max(minStep, m.min(maxStep, config.maxStep)); //最大  步数 0-300 默认为100
    if (config.minStep > config.maxStep) {
        throw '滑动条组件 所需的 参数，最小值 大于 最大值，最大值：' + config.minStep + "，最小值：" + config.maxStep;
    }


    this.init = function () {
        var $slider = $(_sliderComp.html());
        config.$parent.append($slider);

        var $btn = $slider.find('.ratings-bars .slider-btn');//可移动的 按钮
        var $bar = $slider.find('.ratings-bars .slider-scale-box'); // 滑动的 整体 div
        var $currentStep = $slider.find('.ratings-bars .slider-current-step'); // 当前滑动后的值

        var bar = $bar.get(0);
        var btn = $btn.get(0);

        var _max = bar.offsetWidth - btn.offsetWidth; // 可移动的宽度

        $currentStep.val(_sliderComp._currentStep);
        if (_sliderComp._currentStep !== 0) {    //init 初始化 其位置；
            _sliderComp.setValue(_max, $btn);
        }

        //鼠标 按钮  事件；
        $btn.on('mousedown', function (e) {
            var x = (e || win.event).clientX;   //相对 水平位置；
            var l = this.offsetLeft;//已经左移了多少px
            doc.onmousemove = function (e) {    // document 的 鼠标移动事件；
                var thisX = (e || win.event).clientX;
                var to = m.min(_max, m.max(0, l + (thisX - x)));  //thisX - x  得出 鼠标已经移动了多少px
                $btn.css('left', to);

                _sliderComp._currentStep = m.round(config.minStep + m.max(0, to / _max) * (config.maxStep - config.minStep));//    最小值 + （偏移的百分比 * （最大值-最小值））

                $currentStep.val(_sliderComp._currentStep);
                config.callback(_sliderComp._currentStep); //回调
                win.getSelection ? win.getSelection().removeAllRanges() : doc.selection.empty(); //去除  光标选择其他元素；
            };
            doc.onmouseup = new Function('this.οnmοusemοve=null'); //取消 doc 其之前的已绑定 onmousemove事件  此事件必须取消，不然会一直 被选中；
        });

        // 值 输入事件
        $currentStep.keyup(function () {
            var val = this.value;
            if (!val) {
                _sliderComp._currentStep = 0;
            } else {
                val = parseInt(val);
                _sliderComp._currentStep = m.min(config.maxStep, m.max(val, config.minStep));// 赋值 并且返回 值   最小值 0  最大值 为300 以内的数为有效数；
                if (val !== _sliderComp._currentStep) {
                    this.value = _sliderComp._currentStep;
                }
            }
            _sliderComp.setValue(_max, $btn);
            config.callback(_sliderComp._currentStep); //回调
        });

    };

    /**
     * 设置 值
     */
    this.setValue = function (_max, $btn) { //(总长 - 按钮长) * （（当前值 - 最小值）/（最大值-最小值））
        var to = m.min(_max, m.max(0, _max * ((_sliderComp._currentStep - config.minStep) / (config.maxStep - config.minStep))));// - _btnOffsetWidth  按钮的 宽度
        $btn.css('left', to);
    };

    /**
     * 拼接 html 内容
     */
    this.html = function () {
        var html = [];
        html.push('<div class="slider-comp-main">');
        html.push('<div class="ratings-bars">');
        html.push('<input title="偏移值" class="slider-current-step" value="" maxlength="3" οnkeyup="if(/[^\\d]/g.test(value))value=value.replace(/[^\\d]/g,\'\')">');
        html.push('<span class="slider-min-step"></span>');
        html.push('<div class="slider-scale-box">');
        html.push('<span class="slider-btn"></span>');
        html.push('</div>');
        html.push('<span class="slider-max-step"></span>');
        html.push('</div>');
        html.push('</div>');
        return html.join('');
    };


    /**
     * 返回 当前的 值
     */
    this.getResult = function () {
        return _sliderComp._currentStep;
    };

    _sliderComp.init();

    return _sliderComp;
}