Styling of slider doesnot work as expected in IE

Question

I've got a range slider but it doesn't work correctly as well as styles incorrectly in IE. I tried to apply the below described css for IE but it doesn't style as expected.

How to achieve the same styling in IE as in chrome.

Code:

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 applied to achieve styling in 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

Reproduce the problem on my side, it seems like this issue is the IE browser default behavior.

As a workaround, I suggest you could try to use the InputRange component.

Please refer to the following steps to install the InputRange component:

1. Install react-input-range using npm (or yarn). npm install react-input-range
2. Import react-input-range to use InputRange component.
3. Optionally, import react-input-range/lib/css/index.css if you want to apply the default styling.

The sample code as below:

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')
  );

The result as below:

Answer 2

solved:

javascript: onInput doesnt trigger in IE. need to include "onChange event"

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

css for 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;
}

Works as expected in IE!]1