My goal is to place the label between the slider and the slider thumb in order to maximize screen space utilization. However, I am facing an issue where the label appears above everything and I am unable to resolve it using z-index...
HTML:
<div class="container">
<div class="slider">
<label for="slider1" class='sliderlabel'>Test</label>
<input type="range" id='slider1' min="0" max="100" data-role="none">
</div>
</div>
CSS:
.sliderlabel {
z-index: 1;
color: white;
left: 35%;
position: absolute;
}
input[type="range"]::-webkit-slider-thumb {
z-index: 2;
-webkit-appearance: none !important;
width: 20px;
height: 20px;
background-color: #579e81;
border-radius: 30px;
/* box-shadow: 0px 0px 3px #3c6d59;*/
transition: all 0.5s ease;
}
An example of the code can be found here : http://jsfiddle.net/bjvDB/3/