javascript - 滑块的样式在 IE 中无法按预期工作

Question

我有一个范围滑块，但它不能正常工作以及 IE 中的样式不正确。我尝试为 IE 应用下面描述的 css，但它的样式不符合预期。

如何在 IE 中实现与 chrome 中相同的样式。

代码：

editSubComponent = (
   <div className="SettingsTreeValueNode__SliderField">
   {node.LowerBound}
    <input
      type="range"
      className="sliderinput"
      onInput={this.handleSliderChange.bind(this)}
      onMouseUp={this.handleWhenMouseReleased.bind(this)}
     />
   {node.UpperBound}
   </div>
);

css应用于在IE中实现样式

.sliderinput{
  -webkit-appearance: none;
  height: 5px;
  border-radius: 5px;   
  background: #c8c8c8;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-top:20px;
  min-width: 10%;
}

.sliderinput::-ms-fill-lower, .sliderinput::-ms-fill-upper{
  background: transparent;
}

.sliderinput::-ms-track{
  background: transparent;
  height: 5px;
  border-radius: 5px; 
  outline: none;
  margin-top:20px;
  min-width: 10%;

}
.sliderinput::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00a886;
  cursor: pointer;
}

标签： javascriptcssreactjsinternet-explorerinput-type-range

Answer 1

解决了：

javascript: onInput 不会在 IE 中触发。需要包括“onChange 事件”

 <input
  type="range"
  className="sliderinput"
   onInput={this.handleSliderChange.bind(this)}
   onChange={this.handleSliderChange.bind(this)}
   />

用于 IE 的 CSS：

.sliderinput::-ms-ticks-after, .sliderinput::-ms-ticks-before{
  color: transparent;
}

.sliderinput::-ms-fill-upper{
  background: transparent;
}
.sliderinput::-ms-fill-lower{
  background: transparent;
}
.sliderinput::-ms-track { 
  color: transparent;
  border-radius: 5px;
  border-color: transparent;
  height: 5px;
  margin-top:0px;
  margin:5px;
  background: #c8c8c8;
}
.sliderinput::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00a886;
  cursor: pointer;
}

在 IE 中按预期工作！] 1