title: ::ms-thumb pseudo element behaviour after dragging
body: <p>Has anyone had any experience styling and controlling the behaviour of the ms-thumb pseudo-element on the input range control in IE11? </p>
  
  <p>If the control is taller than the thumb pseudo-element the thumb sticks to the top after dragging and doesn't return to it's original position.</p>
  
  <p><a href="http://codepen.io/anon/pen/NqvXgq" rel="nofollow">Here's an example of the behaviour on codepen and the css being used (requires IE11 or Project Spartan/Edge)</a></p>
  
  <pre><code>.c-slider{
    height: 60px;
    background-color: #99CCFF;
    padding:0px;
  }
  
  /*Slider Specific Styling*/
  
  input[type=range]::-ms-thumb {
    width: 30px;
    height:7px;
    border:1px solid #0066CC;
    background-color:#0066CC;
    cursor:pointer;
  }
  
  input[type=range]::-ms-thumb:active{
    background-color:green;
  }
  
  input[type=range]::-ms-thumb:hover{        
      height: 60px;
      width: 30px;    
  }
  
  input[type=range]::-ms-fill-lower {
      background: #A1A1A1;
  }
  
  input[type=range]::-ms-fill-upper {
       background: #EBF5FF;
  }
  
  
  /*Slider Reset Css*/
  input[type=range] {
      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
      width: 100%; /* Specific width is required for Firefox. */
  }
  
  input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
  }
  
  input[type=range]:focus {
      outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  
  
  input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent; /* Hides the slider so custom styles can be added */
      border-color: transparent;
      color: transparent;
  }
  </code></pre>