IE和Edge中的范围滑块CSS问题

Question

我正在为我的网站创建一个范围滑块，它需要在所有浏览器上看起来相同。我现在遇到了IE和Edge的问题。

IE和Edge面临的问题是：

1. 圆形滑块拇指和指针不起作用。

   边界半径：50％;  cursor：pointer;

2. IE在滑块轨道和边框中添加分界线

这是我的代码。我想知道如何解决问题。

$(function() {
  $('input[type="range"]').on('input change', function() {

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
      '-webkit-gradient(linear, left top, right top, ' +
      'color-stop(' + val + ', orange), ' +
      'color-stop(' + val + ', #C5C5C5)' +
      ')'
    );
  });
});

input[type="range"] {
  -webkit-appearance: none;
  -moz-apperance: none;
  outline: none !important;
  border-radius: 6px;
  height: 8px;
  width: 100%;
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, orange), color-stop(0.15, #C5C5C5));
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  cursor: pointer;
  background-color: orange;
  border: 1px solid orange;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  transition: 100ms;
}

input[type='range']:hover::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  cursor: pointer;
  background-color: orange;
  border: 1px solid orange;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}


/*Firefox */

input[type="range"]::-moz-range-thumb {
  background-color: orange;
  border: 1px solid orange;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]:hover::-moz-range-thumb {
  background-color: orange;
  border: 1px solid orange;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
}

input[type=range]::-moz-range-track {
  background: none;
}


/*IE and Edge */

input[type=range]::-ms-thumb {
  background-color: orange;
  border: 1px solid orange;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: hand;
}

input[type=range]::-ms-fill-upper {
  background-color: #C5C5C5;
}

input[type=range]::-ms-fill-lower {
  background-color: orange;
}

input[type=range]::-ms-range-track {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="100" step="1" value="15">

小提琴：

https://jsfiddle.net/anoopcr/ssbx0anj/28/