基于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 使用该控件的一个截图如下：