基于jquery封装的一个slider插件

1 所需的样式

input[type=range] {
    -webkit-appearance: none;
    margin: 18px 0;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #FF4400; 
    /*background: #3ABBB6;*/
    border-radius: 1.3px;
    border: 0.2px solid #010101;
    border-color: transparent; 
    color: transparent;  
    /* background: -webkit-linear-gradient(#3ABBB6, #3ABBB6) no-repeat; */
    background-size: 0% 100%; 
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    margin-top: -9px; /*使滑块超出轨道部分的偏移量相等, 火狐和IE不需要加*/
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: #3ABBB6;
    cursor: pointer;
    -webkit-appearance: none;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #FF4400;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #FF4400;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
    border-color: transparent; /* 去除原有边框 */
    color: transparent; /* 去除轨道内的竖线 */
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: #3ABBB6;
    cursor: pointer;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
}

input[type=range]::-moz-range-progress {
    background: #3ABBB6;
    height: 10px;    
   /*border-radius: 10px; */
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #3ABBB6;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #FF4400;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: #3ABBB6;
    cursor: pointer;
    border: solid 0.125em rgba(205, 224, 230, 0.5); 

input[type=range]:focus::-ms-fill-lower {
    background: #3ABBB6;
}

input[type=range]:focus::-ms-fill-upper {
    background: #FF4400;
}

2 代码

(function($) {
    'use strict';

    var Slider = function(element, cfg) {
        var that = this;
        that.log("Slider arg1: element")
        that.log(element)
        that.log("Slider arg2: cfg")
        that.log(cfg)

        this.$el = $(element);
        this.sliderCfg = {
            min : cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : 0,
            max : cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : 100,
            defaultValue : cfg && !isNaN(parseFloat(cfg.defaultValue)) ? Number(cfg.defaultValue) : 0,
            step : cfg && Number(cfg.step) ? cfg.step : 1,
            callback : cfg && cfg.callback ? cfg.callback : null
        };
        this.init();
        this.render();
    }

    Slider.prototype = {

        init : function() {
            var userAgent = navigator.userAgent;
            this.isWebkit = (userAgent.indexOf("AppleWebKit") >= 0);
            this.isIE = (function() {
                var isIE = false;
                if (!!window.ActiveXObject || "ActiveXObject" in window) {
                    isIE = true;
                } else {
                    isIE = (userAgent.indexOf("compatible") > -1
                            && userAgent.indexOf("MSIE") > -1 && !(userAgent.indexOf("Opera") > -1));
//                  isIE = false;
                }
                return isIE;
            })();
        },

        stopPropagation : function(e) {
            e = e || window.event;
            if (e.stopPropagation) { // W3C阻止冒泡方法
                e.stopPropagation();
            } else {
                e.cancelBubble = true; // IE阻止冒泡方法
            }
        },

        render : function() {
            var that = this;
            var $input = this.$el;
            var min = this.sliderCfg.min;
            var max = this.sliderCfg.max;
            var step = this.sliderCfg.step;
            var defaultValue = this.sliderCfg.defaultValue;
            var callback = this.sliderCfg.callback;

            $input.attr('min', min).attr('max', max).attr('step', step).attr('defaultValue', defaultValue).data("sliderVal", defaultValue);
            // $input.data("sliderVal", defaultValue);

            var event = null;
            var isIE = this.isIE;
            if (isIE) {
                event = "change";
            } else {
                event = "input";
            }

        $input.bind(event, function(e) {
                       that.stopPropagation(e);
                        var el = this;
                        $input.attr('value', el.value);
                        $input.data('sliderVal', el.value);
                        // $input.data("sliderVal", el.value);

                        var isWebkit = this.isWebkit;
                        if (isWebkit) {
                            $input.css('background-size', this.value + '% 100%' );
                        }

                        if ($.isFunction(callback)) {
                            callback(el.value, el);
                        }
                    });

            $input.bind("keydown", function(evt) {
                var el = this;
                var currentValue = parseFloat(el.value);
                that.log("点击前的数值是：" + currentValue);
                switch (evt.which) {
                 case 38: //上 
                     currentValue = that.fixValue(currentValue + parseFloat(step));
                     that.log("点击后的数值是：" + currentValue);
                     that.setValue(currentValue);
                     break;
                 case 40: //下 
                     currentValue = that.fixValue(currentValue - parseFloat(step));
                     that.log("点击后的数值是：" + currentValue);
                     that.setValue(currentValue);
                     break;
                case 37: // 左
                    currentValue = that.fixValue(currentValue - parseFloat(step * 4));
                    that.log("点击后的数值是：" + currentValue);
                    that.setValue(currentValue);
                    break;
                case 39: // 右
                    currentValue = that.fixValue(currentValue + parseFloat(step * 4));
                    that.log("点击后的数值是：" + currentValue);
                    that.setValue(currentValue);
                    break;
                default:
                    return;
                }
            })
        },

        setValue : function(val) {
            val = this.fixValue(val);
            var $input = this.$el;
            $input.attr('value', val);
            $input.data('sliderVal', val);
        },

        fixValue : function(val) { //校正
            val = val < this.min ? this.min : val;
            val = val > this.max ? this.max : val;
            return val;
        },

        log : function(e) {
            console.info(e);
        }
    }

    function Plugin(option, val) {
        console.info("Slider Plugin arg option :");
        console.info(option);
        return this.each(function() {
            var $this = $(this);
            var data = $this.data('bs.slider');
            //  options = $.extend({}, DurationPicker.DEFAULTS, $this.data(), typeof option === 'object' && option);

            if (!data) {
                $this.data('bs.slider', (data = new Slider(this, option)));
            }

            if (typeof option === 'string' && option == "sliderVal") {
                data.setValue(val);
            }
        });
    }

    var old = $.fn.mySlider;
    $.fn.mySlider = Plugin;
    $.fn.mySlider.Constructor = Slider;

    // CAROUSEL NO CONFLICT
    // ====================

    $.fn.mySlider.noConflict = function() {
        $.fn.mySlider = old;
        return this;
    };
})(jQuery);

3 调用方式

 <input type="range"  name="totalTime" maxlength="20" style="width:300px;"/>
 var $totalTime = $("input[name=totalTime]");

    $totalTime.mySlider({ min: 0,   
        max: 100,
        step: 1, 
        defaultValue: 0,
        callback: function(val) {
            //  val 为改变滑动条以后的最新的值，值发生变化，可以在里面完成相应的代码逻辑
        }
    });

//也可以调用如下语句赋特定的值，比如直接将值设置为50
 $totalTime.mySlider("sliderVal", 50);

4 使用该控件的一个截图如下：