Trying to develop a custom slider that is compatible with Chrome and IE11, but encountering challenges in positioning the thumb and elements (white circle and red oval) on the slider track. The white circles need to be linked with a line.
If you want to see what I have achieved so far, check out this fiddle:
https://jsfiddle.net/Pravin_it14/7t9bsrdn/7/
/* Custom Slider Code */
.areaDetail_graph_04 {
height: 87px;
width: 614px!important;
position: relative;
.range-labels li::before {
content: "";
}
.input[type=range] {
-webkit-appearance: none;
}
/* More CSS code here */
...
<div class="areaDetail_graph_04">
<div class="img">
<div class="range">
<input type="range" class="slider" width="614px" value="0" min="0" max="5" id="rangeSlider">
</div>
<ul class="range-labels">
<li>11:00</li>
<li>12:00</li>
<li>13:00</li>
<li>14:00</li>
<li>15:00</li>
<li>16:00</li>
</ul>
<span id="valBox"></span>
</div>
</div>