- 功能:1.滑块;2加,减操作
- 之后详细说明下
html
<!-- 容量 -->
<div class="from_group margin-top-20 js-create-disk-unfold clearfix">
<label>容量</label>
<div class="common_range js-rangeslider">
<div class="range_box left">
<div class="range_bg"></div>
<div id="js-change-value" class="range_position"></div>
<div class="scale margin_b8">
<span class="scale_min js-scale-min"></span>
<span class="scale_max js-scale-max"></span>
</div>
</div>
<div class="computed_box margin-top-10 left">
<button class="btn_range minus"></button>
<input type="number" value="" class="number js-number">
<button class="btn_range plus on"></button>
<span class="unit">(GB)</span>
</div>
</div>
</div>
css 滑块样式
.common_range .range_box{
position: relative;
width: 394px;
}
.common_range .range_bg{
height: 42px;
background-image: url(images/range_bg.png);
}
.common_range .rangeslider {
background-image: none;
}
.common_range .rangeslider--horizontal {
height: 4px;
width: 100%;
}
.common_range .range_position{
position: absolute;
top: 19px;
left: 20px;
width: 354px;
}
.common_range .rangeslider__handle{
width: 9px;
height: 9px;
background: #ff903d;
}
.common_range .rangeslider--horizontal .rangeslider__handle {
top: -3px;
}
.common_range .btn_range{
width: 20px;
height: 20px;
display: inline-block;
border: none;
cursor: pointer;
outline: none;
}
.common_range .scale{
font-size: 12px;
}
.common_range .scale .scale_min{
margin-left: 20px;
}
.common_range .scale .scale_max{
float: right;
}
.common_range .computed_box{
font-size: 0;
text-align: center;
}
.common_range .number{
width: 66px;
height: 18px;
margin: 0 9px;
border-radius: 2px;
text-align: center;
display: inline-block;
vertical-align: top;
border: 1px solid #afbec3;
}
.common_range .minus{
background-image: url(images/minus.png);
}
.common_range .minus.on{
background-image: url(images/minus_on.png);
}
.common_range .plus{
background-image: url(images/plus.png);
}
.common_range .plus.on{
background-image: url(images/plus_on.png);
}
.common_range .unit{
font-size: 12px;
color: #333333;
vertical-align: top;
}
js
//滑块封装
//element:
//initObj: 参数
//callback:回调函数
$rootScope.comRangeSlider = function(element, initObj,callback){
var $document = $(document);
var selector = '[data-rangeslider]';
var $element = $(element);
var $number = $element.parents('.js-rangeslider').find('.number');
var $plus = $element.parents('.js-rangeslider').find('.plus');
var $minus = $element.parents('.js-rangeslider').find('.minus');
var minSize = initObj.minSize; //最小值
var maxSize = initObj.maxSize; //最大值
var step = initObj.step | null; //步长
function valueOutput(element) {
var value = element.value;
$(element).attr('value', value);
$number.attr('value', value);
}
$document.on('input', 'input[type="range"], ' + selector, function(e) {
valueOutput(e.target);
});
$number.off('blur'); //防止 blur 累计触发
$number.on('blur', function(e) {
var $inputRange = $(selector, e.target.parentNode.parentNode);
var value = $number.val();
if(step){ //如果步长存在 每次+10
value = parseInt(Math.round(Math.round(value)/10)*10);
}
if(parseInt(value) <= parseInt(minSize) || value == ''){
value = minSize;
}
if(parseInt(value) > parseInt(maxSize)){
value = maxSize;
}
$(this).val(value);
$inputRange.val(value).change();
});
$plus.off('click'); //防止 click 累计触发
$plus.on('click', function(e){
var $inputRange = $(selector, e.target.parentNode.parentNode);
var value = $number.val();
if(parseInt(value) < parseInt(maxSize)){
if(step){
value = parseInt(value) + 10;
}else{
value++;
}
$inputRange.val(value).change();
$minus.addClass('on');
}
if(parseInt(value) >= parseInt(maxSize)){
$(this).removeClass('on');
}
});
$minus.off('click'); //防止 click 累计触发
$minus.on('click', function(e){
var $inputRange = $(selector, e.target.parentNode.parentNode);
var value = $number.val();
if(parseInt(value) > parseInt(minSize)){
if(step){
value = parseInt(value) - 10;
}else{
value--;
}
$inputRange.val(value).change();
$plus.addClass('on');
}
if(parseInt(value) <= parseInt(minSize)){
$(this).removeClass('on');
}
});
$number.on('input propertychange',function () {
var value = this.value;
//正则 数字
var re = /^0|\D/g;
this.value = value.replace(re, '')
btnStyle(value, true);
});
//按钮样式切换
function btnStyle(value, type){
if(parseInt(value) >= parseInt(maxSize)){
if(type){
$(this).val(maxSize);
}
$minus.addClass('on');
$plus.removeClass('on');
}else if(parseInt(value) <= parseInt(minSize)){
if(type){
$(this).val(minSize);
}
$minus.removeClass('on');
$plus.addClass('on');
}else{
$minus.addClass('on');
$plus.addClass('on');
}
}
//计算
function computedPrice(value){
btnStyle(value);
if (typeof callback == 'function') {
callback(value);
}
}
//滑动
$element.rangeslider({
polyfill: false,
onInit: function() {
var value = this.$element[0].value;
valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
if(parseInt(value) < parseInt(minSize)){
$('input[type="range"]').val(minSize).change();
return;
}
computedPrice(value);
},
onSlideEnd: function(position, value) {
if(step){
value = parseInt(Math.round(Math.round(value)/10)*10);
$('input[type="range"]').val(value).change();
}
}
});
}
//容量滑块 new
$scope.rangeSlider = function(initObj){
$('#js-change-value').html('<input type="range" min="'+ initObj.minSize +'" value="'+ initObj.minSize +'" max="'+ initObj.maxSize +'" data-rangeslider>')
$rootScope.comRangeSlider('.js-rangeslider [data-rangeslider]', initObj,callback);
function callback(val){
console.log(val);
}
}
//初始化 标准型
var initObj = {
'minSize': 100,
'maxSize': 5000,
'step': 10
}
$scope.rangeSlider(initObj);
如下效果: