Как поставить иконку на ползунком

155

18 марта 2019, 00:40

Есть ползунок input range со значениями от 1 до 100 нужно там где будет 60 и 80 изначально поставить над ним иконочки не при измененнии а с начала, кто нибудь знает как это сделать? Сделал на Codepen для наглядности

<a href="https://codepen.io/Misha11/pen/zMYPLy?editors=1111">Codepen </a>

по сути нужно чтобы лейблы были ровно над выбранным значением одинааково но сейчас первый норм остальные нет

Answer 1

<img src="1.ico" style="position: absolute; left: 172px" /> 
<img src="1.ico" style="position: absolute; left: 232px" /> 
<input type=range style="width: 300px; margin-top: 30px" /><br>

Абсолютно позиционируем иконки и задаём позицию по иксу (координату) с рассчёта, допустим, если ширина range равна 300, то X первой иконки будет 60 / 100 * 300 - 8, где 8, допустим половина ширины иконки, получается 172px. Во втором случае - соответственно 232px.

Answer 2

Если нужно только два элемента (цифры или изображения), то можно обойтись псевдоэлементами:

input[type="range"].pseudo { 
  -webkit-appearance: none; 
  appearance: none; 
  position: relative; 
  font: 12px Arial; 
  width: 400px; 
  outline: none; 
  background: linear-gradient(90deg, #bbb, transparent 1px), linear-gradient(transparent 49%, #444 50%, transparent 51%); 
  background-size: calc(10% - 1.25px) 60%; 
  background-position: 6px center; 
  background-repeat: repeat no-repeat; 
  margin-top: 40px; 
} 
 
input.pseudo.sign:before { 
  position: absolute; 
  content: '60'; 
  left: calc(60% - 1px); 
  bottom: 100%; 
  transform: translate(-50%); 
} 
 
input.pseudo.sign:after { 
  position: absolute; 
  content: '80'; 
  left: calc(80% - 4px); 
  bottom: 100%; 
  transform: translate(-50%); 
} 
 
input.pseudo.icon:before { 
  position: absolute; 
  content: ''; 
  width: 32px; 
  height: 32px; 
  left: calc(60% - 1px); 
  bottom: 100%; 
  background: url('https://i.stack.imgur.com/yicEH.gif'); 
  background-size: contain; 
  transform: translate(-50%); 
} 
 
input.pseudo.icon:after { 
  position: absolute; 
  content: ''; 
  width: 32px; 
  height: 32px; 
  left: calc(80% - 4px); 
  bottom: 100%; 
  background: url('https://i.stack.imgur.com/gJi51.jpg'); 
  background-size: contain; 
  transform: translate(-50%); 
}

<input type="range" class="pseudo sign"> 
 
<input type="range" class="pseudo icon">

Для большего количества придётся добавить элементов в разметке:

.elems { 
  position: relative; 
  display: inline-block; 
  width: 400px; 
} 
 
.elems input[type="range"] { 
  -webkit-appearance: none; 
  width: 100%; 
  font: 12px Arial; 
  outline: none; 
  background: linear-gradient(90deg, #bbb, transparent 1px), linear-gradient(transparent 49%, #444 50%, transparent 51%); 
  background-size: calc(10% - 1.25px) 60%; 
  background-position: 6px center; 
  background-repeat: repeat no-repeat; 
} 
 
.elems div { 
  position: absolute; 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  left: 5px; 
  right: 0; 
  font: 12px Arial; 
} 
 
.full { 
  margin-left: -7px; 
}

<div class="elems"> 
  <input type="range"> 
  <div> 
    <span>0</span><span>10</span> 
    <span>20</span><span>30</span> 
    <span>40</span><span>50</span> 
    <span>60</span><span>70</span> 
    <span>80</span><span>90</span> 
    <span class="full">100</span> 
  </div> 
</div>