Native js implementation of slider interval component

This article example shares the specific code of js to implement the slider interval component for your reference. The specific content is as follows

Functional requirements:

1. The minimum value is 0, and the interval range is generated according to the given maximum value;
2. When you drag the slider, the corresponding range is displayed, and the slider bar displays the corresponding status;
3. When clicked, the nearest slider moves to the position where the mouse is clicked.

Default effect:

When you drag the slider, the display is as follows:

analyze:

First, the layout needs to be written. There are four elements in total, two sliders and two slider bars. When laying out, you need to consider monitoring the slider and slider bar events later, and minimize event bubbling;
When dragging a slider, distinguish whether it is the left slider or the right slider;
The click event and mousedown event of the mouse should be compatible. The mousedown event is used uniformly here.
Determine the maximum and minimum left values of the left and right sliders;
The display of the slider bar is very simple. The width is the positioning difference between the left and right sliders, and the left value is the left value of the left slider.
Because the event delegation mechanism is used, and in the mousemove and mouseup events, it is impossible to determine which slider is currently being operated, so when the mouse is pressed, the object currently being operated is passed to the mousemove event;

The code is attached below:

HTML structure, instantiate the slider, and set the range of the current slider:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>slide</title>
</head>
<body>
 <script type="module">
 import Slide from "./js/Slide.js";

 init();
 function init(){
  //The parameter is the maximum range. If not passed, the default is 4000
  let slide = new Slide(4200);
  slide.appendTo("body");
 }

 </script>
</body>
</html>

Slide.js file: completes the functions of creating a slider, dragging a slider, and clicking a slider.

import Utils from "./Utils.js";
export default class Slide{
 static styleCss=false;
 //Minimum range minNum=0;
 //Maximum range maxNum;
 //The left value of the left button leftBtnLeft=0;
 //The left value of the right button rightBtnLeft=238;
 constructor(_max=4000){
 //The default maximum value is 4000
 this.maxNum=_max;
 this.elem = this.createElem();
 }
 createElem(){
 if(this.elem) return this.elem;
 //Create the outermost container let div=Utils.createE("div");
 div.className="slideContainer";
 div.innerHTML=`<p class="priceTxt">Price<span id="rangeText">￥${this.minNum}-${this.maxNum}</span></p>
 <div class="rangeContainer" id="rangeContainer">
  <div class="bgRange" id="bgRange"></div>
  <div class="priceRange" id="priceRange"></div>
  <span id="leftBtn" class="leftBtn"></span>
  <span id="rightBtn" class="rightBtn"></span>
 </div>`;
 Utils.getIdElem(div,this);
 //Set the style Slide.setStyles();
 //Listen to the mousedown event for the parent element this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e))
 return div;
 }
 appendTo(parent){
 Utils.appendTo(this.elem,parent);
 }
 mouseHandler(e){
 //Note: In the result returned by getBoundingClientRect(), width and height both include border. let rect=this.rangeContainer.getBoundingClientRect();
 switch (e.type) {
  case "mousedown":
  //Cancel the default event of mouse fast drag e.preventDefault();
  this.x = e.offsetX;
  this.btnType=e.target.id;
  //If the background bar is clicked, execute the rangeClick function if(/Range/.test(this.btnType)){
   e.stopPropagation();
   //Click function this.rangeClick(e);
   return;
  }
  //If the button is clicked, listen for document mouse movement events this.mouseHandlers=e=>this.mouseHandler(e);
  document.addEventListener("mousemove", this.mouseHandlers);
  document.addEventListener("mouseup", this.mouseHandlers);
  break;
  case "mousemove":
  let x = e.clientX - rect.x - this.x;
  //Get the left value of the left and right buttons this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
  this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
  if (this.btnType === "leftBtn") {
   //Determine the value range of the left button if (x < 0) x = 0;
   if (x > this.rightBtnLeft) x = this.rightBtnLeft;
   this.leftBtn.style.left = x + "px";
  } else if (this.btnType === "rightBtn") {
   //Determine the value range of the right button, minus the 1px border if (x < this.leftBtnLeft) x = this.leftBtnLeft;
   if (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2;
   this.rightBtn.style.left = x + "px";
  }
  //Text range display this.changeRangeText();
  break;
  case "mouseup":
  //Move event listener document.removeEventListener("mousemove", this.mouseHandlers);
  document.removeEventListener("mouseup", this.mouseHandlers);
  break;
 }
 }
 rangeClick(e){
 //Calculate the value of the mouse click position let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2;
 //Judge, if the current click position is on the left side of the left button, or when the left and right buttons overlap, the click position is on the left side of the button, move the left button to the position where the mouse is clickedif(Math.abs(click_X-this.leftBtnLeft)<Math.abs(click_X-this.rightBtnLeft) || 
 (this.leftBtnLeft===this.rightBtnLeft && click_X<this.leftBtnLeft)) this.leftBtn.style.left=click_X+"px";
 //Otherwise, move the right button to the position where the mouse is clicked else this.rightBtn.style.left=click_X+"px";
 //Get the left value of the left and right buttons after moving this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
 this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
 //Text range display this.changeRangeText();
 }
 changeRangeText(){
 //Calculate the minimum and maximum range values and round them off let minTxt=Math.round(this.leftBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
 let maxTxt=Math.round(this.rightBtnLeft/(this.bgRange.clientWidth-2)*this.maxNum);
 this.rangeText.innerText=`￥${minTxt}-${maxTxt}`;
 //Change the color of the slider this.changeRangeSlide();
 }
 changeRangeSlide(){
 //The width of the slider is equal to the distance between the left and right buttons this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px";
 //The left value of the slider is equal to the left value of the left button this.priceRange.style.left=this.leftBtnLeft+"px";
 }
 static setStyles(){
 if(Slide.styleCss) return;
 Slide.styleCss=true;
 Utils.insertCss(".slideContainer",{
  width:"260px",
  height:"70px",
  margin:"50px"
 })
 Utils.insertCss(".priceTxt",{
  fontSize:"14px",
  color:"#666",
  marginBottom:"20px"
 })
 Utils.insertCss(".priceTxt span",{
  float:"right"
 })
 Utils.insertCss(".rangeContainer",{
  width:"260px",
  height:"20px",
  position:"relative",
 })
 Utils.insertCss(".bgRange",{
  width:"240px",
  height:"3px",
  backgroundColor:"#dedede",
  position:"absolute",
  left:"10px",
  top:"9px"
 })
 Utils.insertCss(".priceRange",{
  width:"240px",
  height:"3px",
  background:"#ffa800",
  position:"absolute",
  left:"10px",
  top:"9px"
 })
 Utils.insertCss(".rangeContainer span",{
  width: "20px",
  height: "20px",
  borderRadius:"50%",
  border:"1px solid #ccc",
  background:"#fff",
  position:"absolute",
  top:"0px",
  boxShadow:"2px 2px 2px #333"
 })
 Utils.insertCss(".leftBtn",{
  left:"0px"
 })
 Utils.insertCss(".rightBtn",{
  left:"238px"
 })
 }
}

Utils.js file: is a tool package file.

export default class Utils{
 static createE(elem,style,prep){
 elem = document.createElement(elem);
 if(style) for(let prop in style) elem.style[prop]=style[prop];
 if(prep) for(let prop in prep) elem[prop]=prep[prop];
 return elem;
 }
 static appendTo(elem,parent){
 if (parent.constructor === String) parent = document.querySelector(parent);
 parent.appendChild(elem);
 }
 static randomNum(min,max){
 return Math.floor(Math.random*(max-min)+min);
 }
 static randomColor(alpha){
 alpha=alpha||Math.random().toFixed(1);
 if(isNaN(alpha)) alpha=1;
 if(alpha>1) alpha=1;
 if(alpha<0) alpha=0;
 let col="rgba(";
 for(let i=0;i<3;i++){
  col+=Utils.randomNum(0,256)+",";
 }
 col+=alpha+")";
 return col;
 }
 static insertCss(select,styles){
 if(document.styleSheets.length===0){
  let styleS = Utils.createE("style");
  Utils.appendTo(styleS,document.head);
 }
 let styleSheet = document.styleSheets[document.styleSheets.length-1];
 let str=select+"{";
 for(var prop in styles){
  str+=prop.replace(/[AZ]/g,function(item){
  return "-"+item.toLocaleLowerCase();
  })+":"+styles[prop]+";";
 }
 str+="}"
 styleSheet.insertRule(str,styleSheet.cssRules.length);
 }
 static getIdElem(elem,obj){
 if(elem.id) obj[elem.id]=elem;
 if(elem.children.length===0) return obj;
 for(let i=0;i<elem.children.length;i++){
  Utils.getIdElem(elem.children[i],obj);
 }
 }
}

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:

Vue implements the drag slider verification function (only css+js without background verification steps)
Implementing the drag slider verification function based on JS components (code sharing)
Implementing the drag slider effect based on JavaScript
Javascript implements the implementation code of sliding the slider to change the value
js realizes the slider drag selection digital effect compatible with PC and mobile terminals
JS responds to mouse clicks to achieve the drag effect between two sliders
js method of controlling the image size by dragging the slider
Realizing tab slider effect based on Vue.js
Javascript: When the mouse moves up, the small triangle slider slowly follows the effect
JS implements the slider movement effect in web games in response to mouse clicks

<<: Complete steps to install mysql5.7 on Mac (with pictures and text)

>>: Detailed explanation of the wonderful uses of SUID, SGID and SBIT in Linux

Detailed explanation of the process of deploying the distributed configuration center Apollo with one click using docker compose

Introduction When talking about distribution, we ...

Native js implementation of slider interval component

Functional requirements:

Default effect:

analyze:

The rel attribute of the HTML link tag

This article will show you the principle of MySQL master-slave synchronization

Detailed example of getting the maximum value of each group after grouping in MySQL

Practice of using SuperMap in Vue

Six inheritance methods in JS and their advantages and disadvantages

Detailed explanation of MySQL data rows and row overflow mechanism

About Zabbix forget admin login password reset password

Detailed explanation of Nginx timeout configuration

Solution to PHP not being able to be parsed after nginx installation is complete

Analysis of the implementation method of Nginx and Apache coexistence under Linux server

Recommend

Javascript common higher-order functions details

Innodb system table space maintenance method

Postman data encryption and decryption to implement APP login interface simulation request

MySQL 5.7.20 installation and configuration method graphic tutorial under Windows

JavaScript array merging case study

MySQL5.7 single instance self-starting service configuration process

IE6 web page creation reference IE6 default style

Detailed explanation of the process of deploying the distributed configuration center Apollo with one click using docker compose

Detailed explanation of how to use Docker to deploy Django+MySQL8 development environment

CSS Sticky Footer Implementation Code

Vue binding object, array data cannot be dynamically rendered case detailed explanation

Solution to the problem of Failed when configuring IDEA to connect to MYSQL database

CocosCreator learning modular script

Detailed explanation of JavaScript state container Redux

Velocity.js implements page scrolling switching effect