title: range slider CSS issue in IE and Edge
body: <p>I am creating a range slider for my site which needs to look same on all browser. I am having issue with IE and Edge now.</p>
  
  <p>Issues facing with IE and Edge are:</p>
  
  <ol>
  <li><p>Round slider thumb and hand pointer are not working. </p>
  
  <p>border-radius:50%;
   cursor: pointer;</p></li>
  <li>IE adding a dividing line in slider track and border
  <a href="https://i.stack.imgur.com/dNZ5Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dNZ5Q.png" alt="enter image description here"></a></li>
  </ol>
  
  <p>Here is my code. I would like to know how to fix the issues.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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)' +
        ')'
      );
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="range" min="1" max="100" step="1" value="15"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle:</p>
  
  <p><a href="https://jsfiddle.net/anoopcr/ssbx0anj/28/" rel="nofollow noreferrer">https://jsfiddle.net/anoopcr/ssbx0anj/28/</a></p>