JavaScript Implementation of Slider Dragging Selection for PC and Mobile End

This article shares a js implementation of the effect of selecting numbers on mobile sliding blocks, which can be selected by dragging and sliding with the mouse, for your reference. The specific content is as follows

!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Drag the small block</title>
  <style type="text/css">
   .lineDiv {
    position: relative;
    height: 5px;
    background: red;
    width: 300px;
    margin: 50px auto;
   }
   .lineDiv .minDiv {
    position: absolute;
    top: -5px;
    left: 0;
    width: 15px;
    height: 15px;
    background: green;
    cursor: pointer
   }
   .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: blue;
   }
   .lineDiv .minDiv .vals:after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 6px solid blue;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    margin-left: 11px;
   }
  </style>
 </head>
 <body>
  <center>
   <h3>Drag the small block with the mouse<span id="msg">0</span>%</h3>
  </center>
  <div id="lineDiv" class="lineDiv">
   <div id="minDiv" class="minDiv">
    <div id="vals" class="vals">0</div>
   </div>
  </div>
  <script>
   window.onload = function() {
    var lineDiv = document.getElementById('lineDiv'); //Long line
    var minDiv = document.getElementById('minDiv'); //Small block
    var msg = document.getElementById("msg");
    var vals = document.getElementById("vals");
    var ifBool = false; //Determine if the mouse is pressed
    //Event
    var start = function(e) {
     e.stopPropagation();
     ifBool = true;
     console.log("Mouse press")
    }
    var move = function(e) {
     console.log("Mouse drag")
     if(ifBool) {
      if(!e.touches) { //Compatibility with mobile
       var x = e.clientX;
      } else {  //Compatibility with PC
       var x = e.touches[0].pageX;
      }
      //var x = e.touches[0].pageX || e.clientX; //Mouse horizontal coordinate var x
      var lineDiv_left = getPosition(lineDiv).left; //The horizontal coordinate of the long line
      var minDiv_left = x - lineDiv_left; //The left value of the small block relative to the parent element (long line) 
      if(minDiv_left >= lineDiv.offsetWidth - 15) {
       minDiv_left = lineDiv.offsetWidth - 15;
      }
      if(minDiv_left < 0) {
       minDiv_left = 0;
      }
      //Set the left value of the small block after dragging
      minDiv.style.left = minDiv_left + "px";
      msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15))}} * 100);
      vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15))}} * 100);
     }
    }
    var end = function(e) {
      console.log("Mouse up")
      ifBool = false;
     }
     //Press the lower block with the mouse
    minDiv.addEventListener("touchstart", start);
    minDiv.addEventListener("mousedown", start);
    //Drag
    window.addEventListener("touchmove", move);
    window.addEventListener("mousemove", move);
    //Mouse release
    window.addEventListener("touchend", end);
    window.addEventListener("mouseup", end);
    //Get the absolute position of the element
    function getPosition(node) {
     var left = node.offsetLeft; //Get the left value of the element relative to its parent element var left
     var top = node.offsetTop;
     current = node.offsetParent; // Get the offsetParent of the element
     　 // Keep looping until the root element
     while(current != null) {　　
      left += current.offsetLeft;　　
      top += current.offsetTop;　　
      current = current.offsetParent;　　
     }
     return {
      "left": left,
      "top": top
     };
    }
   }
  </script>
 </body>
</html>

That is all for this article, I hope it will be helpful for your learning, and I also hope that everyone will support the呐喊 tutorial more.

Basic Tutorial