Modifying the range input element

ionic-v1
1

I would like to modify the range input element so that the thumb will not be visible before interacting with the slider. The desired behaviour is demonstrated here (works in Chrome and Firefox): http://codepen.io/anon/pen/vEgaOZ

However, I am not able to implement this using Ionic. When the element is clicked the thumb is not immediately active and it also is not showing the thumb on the position where the click happened.

Here is my attempt:

CSS:

input[type="range"] {
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    opacity: 0;
}

input[type="range"].show::-webkit-slider-thumb {
    opacity: 1;
}

HTML:

<div class="slider-bar" ng-mousedown="touched=true">
    <input type="range" ng-class="{'show': touched}">
</div>