css部分:
input.ne-range[type=range]::-webkit-slider-thumb {
width: 6px;
height: 6px;
border-radius: 50%;
border: 0;
background-color: #FFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
-webkit-transition: border-color 0.15s, background-color 0.15s;
transition: border-color 0.15s, background-color 0.15s;
cursor: pointer;
background-clip: padding-box;
box-sizing: border-box;
-webkit-appearance: none !important;
}
input.ne-range[type=range]::-webkit-slider-thumb:active {
border: 0;
background-color: #FFF;
}
input.ne-range[type=range] {
width: 100%;
height: 2px;
border-radius: 8px;
margin: .8em 0;
padding: 0;
cursor: pointer;
border: 0;
background: -webkit-linear-gradient(#FFF, #FFF) no-repeat #999999;
background-size: 0% 100%;
position: relative;
outline: 0;
top: -3px;
-webkit-appearance: none !important;
}
html:
<input type="range" id="slider" name="slider" class="ne-range" value="0" />
js:
$.fn.RangeSlider = function (cfg) {
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
};
var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback;
$input.attr('min', min)
.attr('max', max)
.attr('step', step);
$input.bind("input", function (e) {
$input.attr('value', this.value);
$input.css('background-size', this.value * 100.0 / max + '% 100%');
if ($.isFunction(callback)) {
callback(this);
}
});
};
var change = function ($input) {
//拖动滑块的事件
}
$('#slider').RangeSlider({
min: 0,
max: 550,
step: 1,
callback: change
});
效果如图: