Custom slider positioning elements over it.(HTML+CSS) - html

Question

Creating a custom slider which should be supporting Chrome and IE11.
Facing issues positioning the thumb and elements(White circle and red oval) on the slider track.
The white circles should be connected with a line.
Here is the fiddle of what i have achieved.
https://jsfiddle.net/Pravin_it14/7t9bsrdn/7/
/*Slider*/
.areaDetail_graph_04 {
height: 87px;
width: 614px!important;
position: relative;
/* background-color: rgba(255,255,255,0.5); */
/* border-radius: 8px 8px 8px 8px; */
}
.areaDetail_graph_04 .img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmYAAABXCAYAAACulYmrAAAACXBIWXMAAAsSAAALEgHS3X78AAADzklEQVR4nO3dT25TVxTA4ROHCuq4LaZS1M5AQuowLCE7apbQJSQ7yhYyrIQEM6pIjaGx3UYUXB3zAlWC0H0PiI+U75tkEsfRu5Of7r+3tVqt4qrZfPkwIg4iYj8i9q79AgAAQ5xExHFEHE4n4+dXP38tzGbz5WFE/OpRAwB8VUfTyfjg/1/wPsxm8+X9ruDMkAEA3IycQdufTsYv89tGIcoAADYl2+u4a7F3YRYRv4kyAICN2OtaLLbOzhe50f+ZcQAA2KhHo+70JQAAm3Uw6q7EAABgs/ZzKfP6RWYAANy4kUcOAFCDMAMAKEKYAQAUIcwAAIoQZgAARdz5nH9jcfE6Xryax19/X8TFv2+MKQBwK929sx3ff3s3dr8br38ONei6jIywp6ezdZABAPBBhtnj3ek61vrqHWZni3/WUfbm7VtDAADwEduj0TrOHuzc6/V4eu0xyyj7/Y8/RRkAwCdkK2UzZTv10Rxml8uXAAC0yXbqsw+/OcwsXwIA9JPt1GdiqynMcpO/jf4AAP1lQ+VNFi2awuz0fGkYAAAGyuvFWjTPmAEAMExrSzWFmctjAQCGa20pr2QCAChCmAEAFCHMAACKEGYAAEU0hdmQl3ACANCvpZrCLN+SDgDAMK0t1RRmP/8wMQwAAAO1tlRTmO3c/casGQDAANlQ2VItmjf/P96dxvbIWQEAgFbZTtlQrZpLKzet9fnDAAC3XbZTn0OUvabAHuzci19++tHMGQDAJ2QrZTNlO/WxdXa+WPV9sPm+p6enMy83BwC4IveU9Z0puzQozC4tLl7Hi1fzdaB50TkAcFtlhGWQ5enL1o3+H/NZYQYAwJdjsxgAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBEZZicGAwBg404yzI6NAwDAxh1vnZ0vHkbEM2MBALBRj0bTyfh5RBwZBwCAjTnKJttarVYxmy/vd0uae8YDAOBGnUwn4ydxeSpzOhm/jIh9BwEAAG7USddga++vy8g462rNsiYAwNeXy5dPugmytfVS5lWz+TIPBBx0BWd5EwDgy8gZstw+dtjt8/8gIv4DGWnfdriGm90AAAAASUVORK5CYII=);
height: 87px;
margin-left: -1px;
width: 614px!important;
z-index: 1;
position: absolute;
top: 0;
}
.range {
position: absolute;
top: 0;
z-index: 99;
width: 614px!important;
}
.range-labels {
margin: 55px -20px 0 5px;
padding: 0;
list-style: none;
width: 614px!important;
}
.range-labels li {
position: relative;
float: left;
width: 100px;
text-align: center;
color: #808093;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.range-labels li::before {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 10px;
height: 10px;
background: #E9EEF0;
border-radius: 50%;
}
.range-labels li:nth-child(1):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(2):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(3):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(4):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(5):before {
position: absolute;
top: -42px;
right: 0;
left: -35px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(6):before {
position: absolute;
top: -42px;
right: 0;
left: -50px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #826AA7;
border-radius: 40%;
}
.range-labels li::after {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 9px;
height: 9px;
background: #E9EEF0;
border-radius: 50%;
}
input[type=range] {
-webkit-appearance: none;
margin: 0px 0 0 30px;
width: 88%;
z-index: 9999;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2px;
background: #E9EEF0;
width: 100%;
cursor: pointer;
animate: 0.2s;
}
input[type=range]::-webkit-slider-thumb {
position: relative;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
z-index: 9999;
-webkit-appearance: none;
margin-top: -14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAAsSAAALEgHS3X78AAACeklEQVRIicWXMWgTYRiGv+T+y9WgtlocSrAekmBDS61ZrEtHoZSCg0MHIVNBJDg5hg6S0amEUugU6ODQoYuLY5fWpUZR0pJQLi2hiFitldjL3Rl5691xJrnepfnTvpAld3mfu+///+97E6jX6+RXyUx2jIjwkR0/UYgon0un8n59PKEAhXukl6qmPZREMXDjWl/oeu8V+/rB4RF9/f6jpmpaXRLFt9Vjdc7rAVyhyUxWDvdIyzVNv39HvslityLU33vV1ehX9Td9Kim0rezpIZG9qx6rT3LplOIbmsxkHwlC8PWQPCgl4lEKieKp1XCqpmm0WSjRlrKrGsafmVw6teoJffpq6Zmu6/MP7g4LscGIb1ijirsVWv/w2WCMPV98MbvgCsUbikxYmZoYF04rpV99O/xJb9Y2DE03HjvfOOgAyigp3pAHEIIP/OAL/yYoNg3WsJOSthL8bkcGJPj/B8WxwC7FpumGxkfjBH/znP+D4hziWLSzS9sRfOEPjg3FwR+JyrwYLYVzDg6uMbPjBC6HL7W8ebNQpPdbJd/m94ailIjHmr7HpkJHA4+hl6K1uZnAoJXJWQROef/LGMorO3tpN2Vy5OC50BrEvG7gtaZOAapgPLmJ55qaHAXlzWMecnH1kMnJBzFwMYDRnLsp+IMD3smaYuIXy5Xp/tHmRs9rTYvlygmHrI2EiLGt7E0m4tGmVshjTTHYkSh0w5gjqw3ilRExMPG7oY2PBYK/lZ3sc4pMg4iBic9T8Nup7Kvwt2xtKEIUMg0iBq9NBR/4mVnJDmkXn5EsdZoGsYYoqe806AC3lXtRShyLM+feBvj5JXy3B+j4vwwR/QWs5oN+Ncbm9gAAAABJRU5ErkJggg==);
}
input[type=range]::-ms-track {
position: absolute;
width: 100%;
height: 2px;
cursor: pointer;
animate: 0.2s;
margin-top: -10px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #E9EEF0;
border: 0.2px solid#E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-fill-upper {
background: #E9EEF0;
border: 0.2px solid #E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-thumb {
position: absolute;
z-index: 99999;
border: transparent;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
background-image: url("../parts/icons/handle.png");
}
input[type=range]:focus::-ms-fill-lower {
background: #E9EEF0;
}
input[type=range]:focus::-ms-fill-upper {
background: #E9EEF0;
}
<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>

Answer 1

Do you mean the white circle is behind the white line?
You could try adding "margin-bottom: -15px;" to
"input[type=range]::-webkit-slider-runnable-track";
In addition, you'd better change the position of the circles inside li(5) and li (6).
use "left: -20px;"both in "li:nth-child(5)" and "li:nth-child(6)".
The complete code is as follows:
/*Slider*/
.areaDetail_graph_04 {
height: 87px;
width: 614px!important;
position: relative;
/* background-color: rgba(255,255,255,0.5); */
/* border-radius: 8px 8px 8px 8px; */
}
.areaDetail_graph_04 .img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmYAAABXCAYAAACulYmrAAAACXBIWXMAAAsSAAALEgHS3X78AAADzklEQVR4nO3dT25TVxTA4ROHCuq4LaZS1M5AQuowLCE7apbQJSQ7yhYyrIQEM6pIjaGx3UYUXB3zAlWC0H0PiI+U75tkEsfRu5Of7r+3tVqt4qrZfPkwIg4iYj8i9q79AgAAQ5xExHFEHE4n4+dXP38tzGbz5WFE/OpRAwB8VUfTyfjg/1/wPsxm8+X9ruDMkAEA3IycQdufTsYv89tGIcoAADYl2+u4a7F3YRYRv4kyAICN2OtaLLbOzhe50f+ZcQAA2KhHo+70JQAAm3Uw6q7EAABgs/ZzKfP6RWYAANy4kUcOAFCDMAMAKEKYAQAUIcwAAIoQZgAARdz5nH9jcfE6Xryax19/X8TFv2+MKQBwK929sx3ff3s3dr8br38ONei6jIywp6ezdZABAPBBhtnj3ek61vrqHWZni3/WUfbm7VtDAADwEduj0TrOHuzc6/V4eu0xyyj7/Y8/RRkAwCdkK2UzZTv10Rxml8uXAAC0yXbqsw+/OcwsXwIA9JPt1GdiqynMcpO/jf4AAP1lQ+VNFi2awuz0fGkYAAAGyuvFWjTPmAEAMExrSzWFmctjAQCGa20pr2QCAChCmAEAFCHMAACKEGYAAEU0hdmQl3ACANCvpZrCLN+SDgDAMK0t1RRmP/8wMQwAAAO1tlRTmO3c/casGQDAANlQ2VItmjf/P96dxvbIWQEAgFbZTtlQrZpLKzet9fnDAAC3XbZTn0OUvabAHuzci19++tHMGQDAJ2QrZTNlO/WxdXa+WPV9sPm+p6enMy83BwC4IveU9Z0puzQozC4tLl7Hi1fzdaB50TkAcFtlhGWQ5enL1o3+H/NZYQYAwJdjsxgAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBEZZicGAwBg404yzI6NAwDAxh1vnZ0vHkbEM2MBALBRj0bTyfh5RBwZBwCAjTnKJttarVYxmy/vd0uae8YDAOBGnUwn4ydxeSpzOhm/jIh9BwEAAG7USddga++vy8g462rNsiYAwNeXy5dPugmytfVS5lWz+TIPBBx0BWd5EwDgy8gZstw+dtjt8/8gIv4DGWnfdriGm90AAAAASUVORK5CYII=);
height: 87px;
margin-left: -1px;
width: 614px!important;
z-index: 1;
position: absolute;
top: 0;
}
.range {
position: absolute;
top: 0;
z-index: 99;
width: 614px!important;
}
.range-labels {
margin: 55px -20px 0 5px;
padding: 0px;
list-style: none;
width: 614px!important;
}
.range-labels li {
position: relative;
float: left;
width: 100px;
text-align: center;
color: #808093;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.range-labels li::before {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 10px;
height: 10px;
background: #E9EEF0;
border-radius: 50%;
}
.range-labels li:nth-child(1):before {
position: absolute;
top: -42px;
right: 0;
left: -10px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(2):before {
position: absolute;
top: -42px;
right: 0;
left: -10px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(3):before {
position: absolute;
top: -42px;
right: 0;
left: -4px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(4):before {
position: absolute;
top: -42px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(5):before {
position: absolute;
top: -42px;
right: 0;
/*left: -35px;*/
left: 6px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(6):before {
position: absolute;
top: -42px;
right: 0;
/*left: -50px;*/
left: 8px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #826AA7;
border-radius: 40%;
}
/*White circle01*/
.range-labels li:nth-child(1):after {
left: -6px;
}
/*White circle02*/
.range-labels li:nth-child(2):after {
left: -10px;
}
/*White circle03*/
.range-labels li:nth-child(3):after {
left: -1px;
}
/*White circle04*/
.range-labels li:nth-child(4):after {
left: 0px;
}
/*White circle05*/
.range-labels li:nth-child(5):after {
left: 7px;
}
/*White circle06*/
.range-labels li:nth-child(6):after {
left: 10px;
}
/*White circle*/
.range-labels li::after {
position: absolute;
top: -35px;
right: 0px;
/*left: 0px;*/
content: "";
margin: 0px auto;
width: 9px;
height: 9px;
background: #E9EEF0;
border-radius: 50%;
}
input[type=range] {
-webkit-appearance: none;
margin: -10px 0px 0px 35px;
width: 88%;
z-index: 9999;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2px;
background: #E9EEF0;
width:100%;
margin-bottom: -15px; /*add*/
/*margin-right: -5px;*/
cursor: pointer;
animate: 0.2s;
}
input[type=range]::-webkit-slider-thumb {
position: relative;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
z-index: 9999;
-webkit-appearance: none;
margin-top: -14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAAsSAAALEgHS3X78AAACeklEQVRIicWXMWgTYRiGv+T+y9WgtlocSrAekmBDS61ZrEtHoZSCg0MHIVNBJDg5hg6S0amEUugU6ODQoYuLY5fWpUZR0pJQLi2hiFitldjL3Rl5691xJrnepfnTvpAld3mfu+///+97E6jX6+RXyUx2jIjwkR0/UYgon0un8n59PKEAhXukl6qmPZREMXDjWl/oeu8V+/rB4RF9/f6jpmpaXRLFt9Vjdc7rAVyhyUxWDvdIyzVNv39HvslityLU33vV1ehX9Td9Kim0rezpIZG9qx6rT3LplOIbmsxkHwlC8PWQPCgl4lEKieKp1XCqpmm0WSjRlrKrGsafmVw6teoJffpq6Zmu6/MP7g4LscGIb1ijirsVWv/w2WCMPV98MbvgCsUbikxYmZoYF04rpV99O/xJb9Y2DE03HjvfOOgAyigp3pAHEIIP/OAL/yYoNg3WsJOSthL8bkcGJPj/B8WxwC7FpumGxkfjBH/znP+D4hziWLSzS9sRfOEPjg3FwR+JyrwYLYVzDg6uMbPjBC6HL7W8ebNQpPdbJd/m94ailIjHmr7HpkJHA4+hl6K1uZnAoJXJWQROef/LGMorO3tpN2Vy5OC50BrEvG7gtaZOAapgPLmJ55qaHAXlzWMecnH1kMnJBzFwMYDRnLsp+IMD3smaYuIXy5Xp/tHmRs9rTYvlygmHrI2EiLGt7E0m4tGmVshjTTHYkSh0w5gjqw3ilRExMPG7oY2PBYK/lZ3sc4pMg4iBic9T8Nup7Kvwt2xtKEIUMg0iBq9NBR/4mVnJDmkXn5EsdZoGsYYoqe806AC3lXtRShyLM+feBvj5JXy3B+j4vwwR/QWs5oN+Ncbm9gAAAABJRU5ErkJggg==);
}
input[type=range]::-ms-track {
position: absolute;
width: 100%;
height: 2px;
cursor: pointer;
animate: 0.2s;
margin-top: -10px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #E9EEF0;
border: 0.2px solid#E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-fill-upper {
background: #E9EEF0;
border: 0.2px solid #E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-thumb {
position: absolute;
z-index: 99999;
border: transparent;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
background-image: url("../parts/icons/handle.png");
}
input[type=range]:focus::-ms-fill-lower {
background: #E9EEF0;
}
input[type=range]:focus::-ms-fill-upper {
background: #E9EEF0;
}
<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>