js realizes horizontal and vertical sliders

Recently, when I was doing a practice project, I needed to use a slider, so I did some research on it.

First, let’s look at the horizontal slider. The effect is as follows:

The code is as follows:

<html>
 <head>
  <meta charset="UTF-8">
  <title>Horizontal Slider</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
 
   .scroll {
    margin: 100px;
    width: 500px;
    height: 5px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 10px;
    height: 20px;
    background: #369;
    position: absolute;
    top: -7px;
    left: 0;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //Get the element var scroll = document.getElementById('scroll');
   var bar = document.getElementById('bar');
   var ptxt = document.getElementsByTagName('p')[0];
   bar.onmousedown = function(event) {
    var event = event || window.event;
    // X of the page event minus the current positioned element relative to the nearest ancestor var x = event.clientX - this.offsetLeft;
    document.onmousemove = function(event) {
     var event = event || window.event;
     var left = event.clientX - x;
     if (left < 0)
      left = 0;
     else if (left > scroll.offsetWidth - bar.offsetWidth) {
      left = scroll.offsetWidth - bar.offsetWidth;
     }
     //Change the left position of the slider
     bar.style.left = left + "px";
     ptxt.innerHTML = "The current slider's movement percentage: " + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
     //Prevent selection window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
 
   }
   //When the mouse pops up, do nothing document.onmouseup = function() {
    document.onmousemove = null;
   }
  </script>
 </body>
</html>

The vertical slider effect is as follows:

The code is as follows:

<html>
 <head>
  <meta charset="UTF-8">
  <title>Vertical Slide Bar</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   .scroll{
    margin: 100px;
    width: 5px;
    height: 320px;
    background: #ccc;
    position: relative;
   }
 
   .bar {
    width: 15px;
    height: 5px;
    background: #369;
    position: absolute;
    top: 0px;
    left: -5;
    cursor: pointer;
   }
   p{
    margin-left: 100px;
   }
  </style>
 </head>
 <body>
  <div class="scroll" id="scroll">
   <div class="bar" id="bar">
   </div>
  </div>
  <p></p>
  <script>
   //Get the element var scroll = document.getElementById("scroll");
   var bar = document.getElementById("bar");
   var ptxt = document.getElementsByTagName('p')[0];
   //Add event bar.onmousedown = function(event) {
    var event = event || window.event;
    //The Y of the page event minus the current positioned element relative to the nearest ancestor var y = event.clientY - this.offsetTop;
    //Drag needs to be written to down document.onmousemove = function(event) {
     var event = event || window.event;
     //Get the moving distance var top = event.clientY - y;
     if (top < 0){
      top = 0;
     }
     else if (top > scroll.offsetHeight - bar.offsetHeight){
      top = scroll.offsetHeight - bar.offsetHeight;
     }
     //Change the top of the slider
     bar.style.top = top + "px";
     //Get the current sliding distance according to the percentage ptxt.innerHTML = "The current slider's movement percentage: " + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
     //Prevent selection window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
   }
   //When the mouse pops up, do nothing document.onmouseup = function() {
    document.onmousemove = null; 
   }
   
  </script>
 </body>
</html>

The reason why the moving percentage display effect is added here is mainly to achieve the purpose of dynamic control if it is necessary to connect to the background data in the future.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect
Native js drag and drop function to create a slider example code
Example of js judging horizontal and vertical screen and prohibiting browser sliding bar

<<: Summary of knowledge points about null in MySQL database

>>: Difference and principle analysis of Nginx forward and reverse proxy