Range Slider - 如何在 IE/Edge 上设置样式？答案

【问题标题】：Range Slider - how to style on IE/Edge?Range Slider - 如何在 IE/Edge 上设置样式？
【发布时间】：2019-12-16 17:13:34
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： javascript css internet-explorer microsoft-edge

【解决方案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 {
        ...
    }

其次，IE中不支持JavaScript中的=>arrow function。您可以使用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，关于跨多个浏览器的样式范围滑块，您也可以查看它。

【讨论】：