title: Ticks on track container. Html5 slider
body: <p>I am trying to reove these aesthetically unpleasing "ticks" from my slider track.</p>
  
  <p><a href="https://i.imgur.com/3NAVBOy.png" rel="nofollow noreferrer">https://i.imgur.com/3NAVBOy.png</a></p>
  
  <p>This is how it appears in chrome and firefox and how I would like it to appear in explorer too:</p>
  
  <p><a href="https://i.imgur.com/wLgSveV.png" rel="nofollow noreferrer">https://i.imgur.com/wLgSveV.png</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input type="range" min="0" max="100" value="55" class="slider" id="myRange"&gt;
  </code></pre>
  
  <p>The CSS I attempted (as suggested by Microsoft)
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-ticks-after" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-ticks-after</a></p>
  
  <pre><code>input[type="range"]::-ms-ticks-before,
  input[type="range"]::-ms-ticks-after {
    display: none;
  }
  </code></pre>
  
  <p>I noticed an element created by the IE browser #ticks_on_track_container is responsible for these "ticks"/lines. When I inspect element and write a style rule like this:</p>
  
  <pre><code>#ticks_on_track_container {
    display: none;
  }
  </code></pre>
  
  <p>It works and the lines dissapear! But when I do that either inline underneath my HTML or in my main.css there is no difference and the lines persist. I can only remove them using inspect element.</p>
  
  <p>Please can you help me :S</p>
  
  <p>EDIT:
  It looks like Internet Explorer appends a whole new html file onto the end of mine!? How can I edit the styles of this?</p>
  
  <p><a href="https://i.imgur.com/syIRbEo.png" rel="nofollow noreferrer">https://i.imgur.com/syIRbEo.png</a></p>