Question

我有一个范围滑块，但是它在IE中无法正常工作以及样式不正确。我试图将以下描述的CSS应用于IE，但它的样式不符合预期。

如何在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;
}

Answer 1

重现此问题，看来这是IE浏览器的默认行为。

作为解决方法，建议您尝试使用the InputRange component。

请参考以下步骤安装InputRange组件：

使用npm（或yarn）安装react-input-range。 npm install react-input-range
导入react-input-range以使用InputRange组件。
（可选）如果要应用默认样式，请导入react-input-range / lib / css / index.css。

示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import InputRange from 'react-input-range';
import 'react-input-range/lib/css/index.css';

class FlavorForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: '222', min: 2, max: 500 };
    }
    render() {
      return (
        <form>
          <div className="inputrange"> 
            <InputRange
            maxValue={this.state.max}
            minValue={this.state.min}
            value={this.state.value}
            onChange={value => this.setState({ value })} />
          </div>
        </form>
      );
    }
  }

  ReactDOM.render(
    <FlavorForm />,
    document.getElementById('root')
  );

结果如下：

Answer 2

已解决：

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中正常工作！ ![Result in IE ] 1

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

2 个答案: