Стилизация слайдера не работает должным образом в IE

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 по умолчанию.

В качестве обходного пути предлагаю попробовать компонент InputRange .

Пожалуйста, обратитесь к следующим шагам для установки компонента InputRange:

1. Установите диапазон ввода-реакции, используя npm (или пряжу). npm установить диапазон реактивного ввода
2. Импортировать диапазон ввода-ввода для использования компонента InputRange.
3. Дополнительно, если вы хотите применить стиль по умолчанию, импортируйте response-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)}
   />

css для IE:

.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