Question

好的，我在JS或JQuery方面没有很多经验，所以我不确定从这里开始。我希望列出的数字随着滑块的移动而调整。第一个数字应该是滑块总数x 30分钟，总数将四舍五入到最接近的小时数。第二个数字应该是滑块总数x 5分钟，并且总数也应四舍五入到最接近的小时数。

var rangeSlider = function(){
    var slider = $('.range-slider'),
        range = $('.range-slider__range'),
        value = $('.range-slider__value');
      
    slider.each(function(){
  
      value.each(function(){
        var value = $(this).prev().attr('value');
        $(this).html(value);
      });
  
      range.on('input', function(){
        $(this).next(value).html(this.value);
      });
    });
  };
  
  rangeSlider();

.range-slider {
    margin: 60px 0 0 0%;
  }
  
  .range-slider {
    width: 100%;
  }
  
  .range-slider__range {
    -webkit-appearance: none;
    width: calc(100% - (73px));
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
  }
  .range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
  }
  .range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
  }
  .range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
  }
  .range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
  }
  .range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
  }
  .range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
  }
  .range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
  }
  
  .range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
  }
  .range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
  }
  
  ::-moz-range-track {
    background: #d7dcdf;
    border: 0;
  }
  
  input::-moz-focus-inner,
  input::-moz-focus-outer {
    border: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>How many quotes do you currently do a month?</h5>
                <div class="range-slider">
                    <input class="range-slider__range" type="range" value="100" min="0" max="500">
                    <span class="range-slider__value">0</span>
                </div> 
                <br>
                <ul class="list-inline">
                    <li class="list-inline-item">  
                        <!-- This part = range value x 30 minutes rounded into hours-->
                        <p>Time Spent On Quotes NOW: <strong>5 Hours</strong></p> 
                    </li>
                    <li class="list-inline-item">                                     
                        <!--This part = range value x 5 minutes rounded into hours-->
                        <p>Time Spent on Quotes with app: <strong>2 Hours</strong></p>
                    </li>
                </ul>

Answer 1

您可以充分利用jQuery来简化代码。对于计算，您可以使用.text( function )。在此函数内，您可以进行数学运算。

示例片段：

var rangeSlider = function () {
    var range = $('.range-slider__range');

    range.on('input', function () {
        $(this).next().html(this.value);
        var fv = +this.value;
        var nobj = $(this).closest('.range-slider').nextAll('.list-inline:first');
        nobj.find('.list-inline-item:first').find('strong').text(function (idx, txt) {
            return (fv < 13) ? (fv * 30) + ' Minutes' : Math.floor((fv * 30) / 60) + ' Hours';
        });
        nobj.find('.list-inline-item:last').find('strong').text(function (idx, txt) {
            return (fv < 13) ? (fv * 5) + ' Minutes' : Math.floor((fv * 5) / 60) + ' Hours';
        });
    }).trigger('input');
};
rangeSlider();

.range-slider {
    margin: 60px 0 0 0%;
}

.range-slider {
    width: 100%;
}

.range-slider__range {
    -webkit-appearance: none;
    width: calc(100% - (73px));
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
}
.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
}

::-moz-range-track {
    background: #d7dcdf;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>How many quotes do you currently do a month?</h5>
<div class="range-slider">
    <input class="range-slider__range" type="range" value="100" min="0" max="500">
    <span class="range-slider__value">0</span>
</div>
<br>
<ul class="list-inline">
    <li class="list-inline-item">
        <!-- This part = range value x 30 minutes rounded into hours-->
        <p>Time Spent On Quotes NOW: <strong>5 Hours</strong></p>
    </li>
    <li class="list-inline-item">
        <!--This part = range value x 5 minutes rounded into hours-->
        <p>Time Spent on Quotes with app: <strong>2 Hours</strong></p>
    </li>
</ul>

从范围滑块将值计算为小时

1 个答案: