Пользовательские элементы размещения слайдера над ним. (HTML + CSS)

Question

Создание настраиваемого слайдера, который должен поддерживать Chrome и IE11. Устранение проблем с размещением большого пальца и элементов (белый круг и красный овал) на дорожке ползунка. Белые круги должны быть соединены линией.

Вот скрипка того, чего я добился.

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

Вы имеете в виду, что белый кружок находится за белой линией?

Вы можете попробовать добавить «margin-bottom: -15px;» to "input [type = range] :: - webkit-slider-runnable-track";

Кроме того, вам лучше изменить положение кругов внутри li (5) и li (6).

используйте «left: -20px;» как в «li: nth-child (5)», так и в «li: nth-child (6)».

Полный код выглядит следующим образом :

/*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>