Реализация скроллбара с ползунком на js и php

120

11 декабря 2020, 16:30

Задаешь значение двум переменным от 1 до 10 например. И когда перетаскиваешь ползунок он выдает значение от 1 до 10 в зависимости от своего положения, просто текстом на страницу. Буду благодарен за быстрый ответ.

Answer 1

Можно считать что почти без js

<input type="range" min="-33" max="133" value="22" onchange="val.textContent=this.value"> 
<label id="val">22</label>

<?php
    $min=-33;
    $max=133;
    $val=22;
    echo "<input type='range' min='".$min."' max='".$max."' value='".$val."' 
                 onchange='val.textContent=this.value'>
          <label id='val'>".$val."</label>";
?>

http://sandbox.onlinephpfunctions.com/

Answer 2

function scrollPos() { 
  var div = document.getElementById("block").scrollTop; 
  document.getElementById("text").innerHTML = div; 
}

#block { 
  font-family: sans-serif; 
  line-height: 22px; 
  width: 250px; 
  height: 250px; 
  padding: 10px; 
  overflow-Y: scroll; 
  border: 1px solid red; 
}

<div id="block" onscroll="scrollPos()"> 
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя 
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах 
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. 
</div> 
 
<p id="text"> 
</p>