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;
border-radius: 1.3px;
border: 0.2px solid #010101;
border-color: transparent;
color: transparent;
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;
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;
}
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));
}
return isIE;
})();
},
stopPropagation : function(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
},
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);
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);
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');
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;
$.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) {
}
});
$totalTime.mySlider("sliderVal", 50);
4 使用该控件的一个截图如下: