Question

我正在尝试在IE上设置此范围滑块的样式。真是一场噩梦。有人知道为什么曲目的填充颜色不起作用吗？在轨道上也没有完全应用边界半径。

   &::-ms-track {
        box-sizing: border-box;
        border: none;
        width: 12.5em;
        height: 8px;
        background: $beige-yellow;
        border-radius: 12px;
    }

    &::-ms-fill-lower {
        height: 8px;
        background: $army-green;
    }

    &::-ms-fill-upper {
        background: $beige-yellow;
    }

在此处查看完整代码：https://codepen.io/anon/pen/PMQKdp

Answer 1

首先，我们应在IE专有伪元素之前使用input[type="range"]在IE和Edge中设置范围滑块的样式。因此，我们应该删除CSS中的.slider::-ms-track，.slider::-ms-fill-lower，.slider::-ms-thumb，.slider::-ms-tooltip部分，并像下面这样写：

    input[type="range"]::-ms-fill-lower {
        ...
    }
    input[type="range"]::-ms-fill-upper {
        ...
    }
    input[type="range"]::-ms-track {
        ...
    }
    input[type="range"]::-ms-thumb {
        ...
    }
    input[type="range"]::-ms-tooltip {
        ...
    }

第二，JavaScript中的=> arrow function在IE中不受支持。您可以使用Babel's translation使其与IE兼容。

所以最终的代码是这样的：

var _R = document.querySelector('[type=range]');

_R.style.setProperty('--val', +_R.value);

_R.style.setProperty('--max', +_R.max);

_R.style.setProperty('--min', +_R.min);

document.documentElement.classList.add('js');

_R.addEventListener('input', function(e) {
  _R.style.setProperty('--val', +_R.value);
}, false);

input:focus {
  outline: none;
}

.slider {
  -webkit-appearance: none;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min))/var(--range));
  --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1.5em;
  background: transparent;
  font: 1em/1 arial, sans-serif;
  border: none;
}

.slider,
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.slider::-webkit-slider-runnable-track {
  box-sizing: border-box;
  border: none;
  width: 12.5em;
  height: 0.5em;
  background: #ccc;
}

.js .slider::-webkit-slider-runnable-track {
  background: linear-gradient(#7b1c1a, #7b1c1a) 0/var(--sx) 100% no-repeat #ccc;
}

.slider::-moz-range-track {
  box-sizing: border-box;
  border: none;
  height: 0.5em;
  background: #ccc;
}

.slider::-moz-range-progress {
  height: 0.5em;
  background: #7b1c1a;
}

.slider::-webkit-slider-thumb {
  position: relative;
  z-index: 99;
  margin-top: -0.550em;
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #7b1c1a;
}

.slider::-moz-range-thumb {
  position: relative;
  z-index: 99;
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #7b1c1a;
}

#tickmarks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

#tickmarks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 4px;
  height: 4px;
  background: green;
  color: green;
  border-radius: 100%;
  line-height: 54px;
  top: -34px;
  left: 3px;
  z-index: 0;
}

input[type="range"]::-ms-fill-lower {
  background: #7b1c1a;
}

input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-track {
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #ccc;
}

input[type="range"]::-ms-thumb {
  position: relative;
  z-index: 99;
  margin-top: 0;
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #7b1c1a;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

<div class="slidecontainer">
  <input type="range" min="5" max="20" value="10" step='2.5' class="slider" id="myRange" list='tickmarks'>
  <div id="tickmarks">
    <p>5</p>
    <p>7.5</p>
    <p>10</p>
    <p>12.5</p>
    <p>15</p>
    <p>17.5</p>
    <p>20</p>
  </div>
</div>

此外，这是有关在多个浏览器中设置范围滑块样式的非常有用的article，您也可以进行检查。

范围滑块-如何在IE / Edge上设置样式？

1 个答案: