Internet Explorer 多范围输入滑块答案

【问题标题】：Internet Explorer Multi Range Input SliderInternet Explorer 多范围输入滑块
【发布时间】：2020-10-16 07:53:21
【问题描述】：

有没有人设法让一个多范围输入滑块在 Internet Explorer 中仅使用 HTML 和 CSS 工作？

我可以在 Firefox 和 Chrome 中轻松做到这一点，但在 Internet Explorer 中却不行。

我在下面添加了我的 HTML 和 CSS，你会注意到左手拇指不会在滑块上移动

.slider{
    -ms-appearance: none;
     position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
      background-color: transparent;
    width: 80%;
    height: 5px;
    pointer-events: all; 
}

<input class ="slider"  type="range" value="0" min="0" max="1000000" step="10000"/>
<input class ="slider" type="range" value="1000000" min="0" max="1000000" step="10000"/>

【问题讨论】：

标签： html css internet-explorer input slider

【解决方案1】：

你可以试试下面的代码，它可以在 IE 11 中很好地工作：

body {
  min-height: 100px;
}

div {
  display: flex;
}

input {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  margin: -2px;
}

input::-webkit-slider-thumb {
  margin: 0;
  padding: 0;
}

#a {
  direction: rtl;
}

<div>
  <input id="a" type="range" min="0" max="10" value="0" />
  <input id="b" type="range" min="11" max="20" value="20" />
</div>

在 IE 中的结果：

【讨论】：

感谢您的回复，但这只是将 2 个不同的滑块左右放在同一行上。我上面的滑块非常不同，它将有效地充当一个滑块，拇指可以从滑块的一端拖动到滑块的另一端，拇指不会在滑块上停止一半。 webkit-slider-thumb 也不适用于在 Internet Explorer 上设置范围输入的样式，该特定 CSS 属性用于 google chrome 和 safari 和 opera。
您上面的代码示例是将两个滑块放在一起，即使在 Chrome 中也只有一个拇指可以工作。您可以参考this polyfill 了解浏览器中的多范围。它似乎满足您的要求。但它也使用 javascript。
不，我不想使用 javascript。我只想按照我原来的问题使用 HTML 和 CSS。您认为只有一个拇指在 chrome 中工作是不正确的，正如我在最初的问题中已经说过的那样，我可以在 Chrome 和 Firefox 中轻松地做到这一点。
您可以参考this thread 中接受的答案。我认为没有 javascript 没有办法在 IE 中实现这一点。最简单的方法是使用 JQuery 滑块。
感谢您的反馈，我将放弃对 IE 的支持。