在双滑块 HTML 组件中，单击 Internet Explorer 中无法识别的第一个元素

Question

我正在尝试仅使用 HTML 和 CSS 构建一个双步滑块，而无需任何 JQuery。它在 Chrome 和 Mozilla 中运行良好，但在 IE11 中，它没有在第一个输入元素内注册点击。 我使用 position:absolute 设计了滑块，并在彼此的顶部制作了两个 html 输入滑块。在 IE 中，我只能单击并拖动 Second Input Elemenr。

.slider {
  -webkit-appearance: none;
  width: 100%;
  //height: 10px;
  position: absolute;
  //background: #f3f3f3;
  outline: none;
  border-radius: 8px;
}

.slider input {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 25%;
  top: 15px;
  width: 50%;
  outline: none;
  height: 18px;
  margin: 0;
  padding: 0;
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #E6E6E6;
  border: none;
  border-radius: 3px;

}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  //border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  border: 1px solid #3972D6;
  margin-top: -4px;
  cursor: pointer;
}


.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6e6e6;
  border: 2px solid #cdcdcd;

  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ea4550;

  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
}

.slider input::-moz-range-track {
  position: relative;
  z-index: -1;
  border: 0;
}

.slider input:last-of-type::-moz-range-track {
  -moz-appearance: none;
  background: none transparent;
  border: 0;
}

.slider input[type="range"]::-moz-focus-outer {
  border: 0;
}

.flex-next {
  display: flex;
  justify-content: flex-start;
}

.dual-slider-container {
  position: relative;
  width: 100%;
}

.dual-slider-text-left {
  position: relative;
  bottom: 12px;
  right: 8px;

  .text-style {
    color: #303030;
    font-size: 20px;
    font-weight: 600;
    text-align: right;
  }

  .text2 {
    text-align: right;
    font-size: 14px;
  }
}

.dual-slider-text-right {
  position: relative;
  bottom: 12px;
  left: 8px;

  .text-style {
    color: #303030;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
  }

  .text2 {
    text-align: left;
    font-size: 14px;
  }
}

.pointer {
  cursor: pointer;
}

//Internet Explorer Support
input[type=range]::-ms-track {
  width: 100%;
  height: 8px;

  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;

  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}

#lower::-ms-fill-lower {
  background: #E6E6E6;
  border-radius: 10px;
}

#lower::-ms-fill-upper {
  background: #E6E6E6;
  border-radius: 10px;
}

#higher::-ms-fill-lower {
  background: transparent;
  border-radius: 10px;
}

#higher::-ms-fill-upper {
  background: transparent;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  //border: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: white;
  border: 1px solid #3972D6;
  //cursor: hand;
}

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

<div style="padding:8px" class="col-12 row m-0">
  <div class="dual-slider-text-left col-2 p-0">
    <div class="text-style">
      {{minValue}}
    </div>
    <div class="text2">{{minValueText}}</div>
  </div>
  <div class="col-8 p-0">
    <div class="dual-slider-container">
      <input (click)="getSliderOneValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
             value="{{sliderOneValue}}"
             class="slider" [disabled]="disabled"  [ngClass]="{'pointer' : !disabled}"
             id="lower">
    </div>
    <div class="dual-slider-container">
      <input (click)="getSliderTwoValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
             value="{{sliderTwoValue}}"
             class="slider" [disabled]="disabled" [ngClass]="{'pointer' : !disabled}"
             id="higher">
    </div>
  </div>
  <div class="dual-slider-text-right col-2 p-0">
    <div class="text-style">{{maxValue}}</div>
    <div class="text2">{{maxValueText}}</div>
  </div>
</div>

Answer 1

如果它们在 IE 中重叠，您似乎只能到达第二个滑块。您可以并排使用两张幻灯片作为解决方法。我做了一个demo，你可以参考一下。

body {
    min-height: 100px;
}
div {
    display: flex;
}
input {
    flex: 1 0 0;
    min-width: 0;
    padding: 0;
}
input::-webkit-slider-thumb {
    margin: 0;
    padding: 0;
}
output {
    display: block;
    text-align: center;
    margin-top: 3px;
    color: gray;
}

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