滑块 - 代码天地

功能：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;
    }

//滑块封装
//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);

如下效果：
这里写图片描述

滑块

猜你喜欢