即使我们不是点击按钮而是点击轨道，如何进行更改？

问题描述

您点击轨道，将 offsetX 转换为百分比并将其与最小值和最大值进行比较

您点击轨道，将 offsetX 转换为百分比并将其与最小值和最大值进行比较

var inputLeft = document.getElementById("input-left");
var inputRight = document.getElementById("input-right");

var minValue = document.querySelector('.min');
var maxValue = document.querySelector('.max');

var thumbLeft = document.querySelector(".slider > .thumb.left");
var thumbRight = document.querySelector(".slider > .thumb.right");
var range = document.querySelector(".slider > .range");

function setLeftValue() {
  var _this = inputLeft,min = parseInt(_this.min),max = parseInt(_this.max);

  _this.value = Math.min(parseInt(_this.value),parseInt(inputRight.value) - 1);

  var percent = ((_this.value - min) / (max - min)) * 100;

  thumbLeft.style.left = percent + "%";
  range.style.left = percent + "%";
}
setLeftValue();

function setRightValue() {
  var _this = inputRight,max = parseInt(_this.max);

  _this.value = Math.max(parseInt(_this.value),parseInt(inputLeft.value) + 1);

  var percent = ((_this.value - min) / (max - min)) * 100;

  thumbRight.style.right = (100 - percent) + "%";
  range.style.right = (100 - percent) + "%";
}
setRightValue();

inputLeft.addEventListener("input",setLeftValue);
inputRight.addEventListener("input",setRightValue);

inputLeft.addEventListener('input',function() { updateValue.call(this,minValue) } )
inputRight.addEventListener("input",maxValue) } )


function updateValue (dataElem){
  dataElem.textContent = this.value;
}

.middle {
  position: relative;
  width: 50%;
  max-width: 500px;
  margin-top: 55px;
}

.middle .slider {
  position: relative;
  z-index: 1;
  height: 10px;
  margin: 0 15px;
}

.middle .slider>.track {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #c6aee7;
}

.middle .slider>.range {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #6200ee;
}

.middle .slider>.thumb {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  background-color: #6200ee;
  border-radius: 50%;
  Box-shadow: 0 0 0 0 rgba(98,238,0.1);
  transition: Box-shadow .3s ease-in-out;
}

.middle .slider>.thumb.left {
  left: 25%;
  transform: translate(-15px,-10px);
}

.middle .slider>.thumb.right {
  right: 25%;
  transform: translate(15px,-10px);
}

.middle .slider>.thumb.hover {
  Box-shadow: 0 0 0 20px rgba(98,0.1);
}

.middle .slider>.thumb.active {
  Box-shadow: 0 0 0 40px rgba(98,0.2);
}

.middle input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 2;
  height: 10px;
  width: 100%;
  opacity: 0;
}

.middle input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 0 none;
  background-color: red;
  -webkit-appearance: none;
}

.wrap {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
}

<div class="middle">
    <div class="multi-range-slider">
        <input type="range" id="input-left" min="18" max="90" value="45">
        <input type="range" id="input-right" min="18" max="90" value="75">

        <div class="slider">
            <div class="track"></div>
            <div class="range"></div>
            <div class="thumb left"></div>
            <div class="thumb right"></div>
        </div>
    </div>
    <div class="wrap">
      <div class="min">45</div>
      <div class="max">75</div>
    </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）