Как заставить работать обычный div блок как input range?

Question

let main = document.querySelector('#main');
main.onmousedown = function(e) {
  moveAt(e);
  function moveAt(event) {
  document.querySelector('#main > div').style.width = event.offsetX + 'px'; 
}
  main.onmousemove = function() {
    moveAt(event);
  }

  document.onmouseup = function() {
    main.onmousemove = null;
    main.onmouseup = null;
  }
}

body{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main{
    height: 8px;
    background: #000;
    cursor: pointer;
  width: 100%;
  background: #ededed;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 10px;
} 
#main > div {
  width: 15%;
  height: 8px;
  background: red;
  position: relative;
}
#main > div::before {content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
    position: absolute;
    right: -7px;
    top: -2px;
    cursor: pointer;
}

input {
  width: 100%;
}

<div style="width:600px;"> 
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <input type="range" min="0" max="100" value="10">
  <br>
  <br>
  <br>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <div id="main"> <div></div> </div>
</div>

Сделал такой див чтобы легче было стилиризовать, а то input range приходиться очень трудно. Так вот сделайте прокрутку он все время тормозит и выделяет контент все время, как можно это исправить ?

Answer 1

Во-первых: надо вынести все методы и listener'ы из метода onmousedown

Во-вторых: можно регитстрировать флагом когда нажата была мышка икогда отпущена

В-третьих: движение влево вправо наверное стоит повесить всё же на документ, потому что человек не сможет ровно по прямой вести мышкой и может вниз уползти далеко, но возможность должна сохраниться

let main = document.querySelector('#main');
let mouseIsPressed = false;

main.onmousedown = function(e) {
    mouseIsPressed = true;
    moveAt(e);
}    

function moveAt(event) {
    document.querySelector('#main > div').style.width = event.offsetX + 'px'; 
}

document.onmousemove = function(event) {
    if (mouseIsPressed)
        moveAt(event);
}

document.onmouseup = function() {
    main.onmousemove = null;
    main.onmouseup = null;
    mouseIsPressed = false;
}

body{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main{
    height: 8px;
    background: #000;
    cursor: pointer;
  width: 100%;
  background: #ededed;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 10px;
} 
#main > div {
  width: 15%;
  height: 8px;
  background: red;
  position: relative;
}
#main > div::before {content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
    position: absolute;
    right: -7px;
    top: -2px;
    cursor: pointer;
}

input {
  width: 100%;
}

<div style="width:600px;"> 
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <input type="range" min="0" max="100" value="10">
  <br>
  <br>
  <br>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <div id="main"> <div></div> </div>
</div>

БЛОГ НА HUSL

Как заставить работать обычный div блок как input range?

Ответы (1 шт):