There is an input range slider with values ​​from 1 to 100 that need to be there where 60 and 80 will initially be set above it with icons not when changed but from the beginning, does anyone know how to do this? Made on codepen for clarity

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

in fact, it is necessary that the labels are exactly above the selected value the same but now the first standards are not the rest

  • Give an example code, please. - Stepan Kasyanenko
  • Define the value input , input.value and then write the conditions in the function, if if(input.value==60) then run the function that will be responsible for the appearance of the picture. And how will you hide it for you to decide whether to create an element using js , or to hide using opacity или display: none; or maybe it will be loaded using ajax - Air

2 answers 2

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

Absolutely position the icons and set the position by X (coordinate) from the calculation, for example, if the width of the range is 300 , then the X of the first icon will be 60/100 * 300 - 8 , where 8, say half the width of the icon, it turns out 172px . In the second case - 232px respectively.

  • I did as you suggested, but in three approximately staged labels not evenly, in the first one in the final shifts, you do not know how to solve it? - misha11
  • And how do you set labels, if you use the mouse and take the x coordinate of the mouse, then there may be discrepancies associated with possible horizontal indents. - Oleg
  • there are no mouse coordinates - misha11
  • codepen.io/Misha11/pen/zMYPLy?editors=1111 - misha11
  • Given the slider width and the fact that the minimum selection value is not 0, but 1, rewrite the 7th line of the JS code like this: var left = labels [i] / (el ['max'] - el ['min']) * (w - thirty); where 30 is the width of the slider. - Oleg

If you need only two elements (numbers or images), you can get by with pseudo-elements:

 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">

For more, you have to add elements to the markup:

 .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>

  • That is, the length of the slider is exactly 100 values? that is, if the length of the slider for example 400 pixels, then 240 will be 60? - misha11
  • @ misha11, size and range of values are different parameters and may not be related. Refine the desired behavior and the final desired result. - UModeL pm