::ms-thumb pseudo element behaviour after dragging

Question

Has anyone had any experience styling and controlling the behaviour of the ms-thumb pseudo-element on the input range control in IE11?

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.

Here's an example of the behaviour on codepen and the css being used (requires IE11 or Project Spartan/Edge)

.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;
}

Answer 1

Try setting top and bottom margins on the thumb equal to half the difference between the thumb height and the control height.