本文实例为大家分享了js实现滑块区间组件的具体代码，供大家参考，具体内容如下
功能需求：1、最小值为0，按照给定的最大值，生成区间范围；
2、拖动滑块移动时，显示相应的范围区间，滑块条显示对应的状态；
3、点击时，使最近的滑块移动到鼠标点击的位置。
当拖动滑块时，显示如下：
分析：
- 首先布局要写好，一共有4个元素，两个滑块和两个滑块条。布局时要考虑到后期对滑块和滑块条进行事件监听，尽可能少地出现事件冒泡；
- 拖动滑块时，要区分是左边的滑块还是右边的滑块；
- 鼠标的click事件和mousedown事件要兼容好，这里统一使用的是mousedown事件；
- 要确定好左右滑块的最大最小 left 值；
- 滑块条的显示就很简单了，宽度是左、右滑块的定位差值，left值是左滑块的left值；
- 因为使用了事件委托机制，而在mousemove和mouseup事件中，无法判断当前操作的是哪一个滑块，所以要在鼠标按下时，将当前操作的对象传到mousemove事件中；
下面附上代码：
html结构，实例化滑块，可以设置当前滑块的区间范围：
slide
Slide.js文件：完成创建滑块，拖动滑块，点击滑块的功能。
import Utils from "./Utils.js";
export default class Slide{
static styleCss=false;
//最小范围
minNum=0;
//最大范围
maxNum;
//左边按钮的left值
leftBtnLeft=0;
//右边按钮的left值
rightBtnLeft=238;
constructor(_max=4000){
//最大值默认为4000
this.maxNum=_max;
this.elem=this.createElem();
}
createElem(){
if(this.elem) return this.elem;
//创建最外层容器
let div=Utils.createE("div");
div.className="slideContainer";
div.innerHTML=`价格￥${this.minNum}-${this.maxNum}
`;
Utils.getIdElem(div,this);
//设置样式
Slide.setStyles();
//给父元素监听mousedown事件
this.rangeContainer.addEventListener("mousedown",e=>this.mouseHandler(e))
return div;
}
appendTo(parent){
Utils.appendTo(this.elem,parent);
}
mouseHandler(e){
//注意：getBoundingClientRect()返回的结果中，width height 都是包含border的
let rect=this.rangeContainer.getBoundingClientRect();
switch (e.type) {
case "mousedown":
//取消鼠标快速拖动的默认事件
e.preventDefault();
this.x = e.offsetX;
this.btnType=e.target.id;
//如果点击的是背景条，执行rangeClick函数
if(/Range/.test(this.btnType)){
e.stopPropagation();
//点击函数
this.rangeClick(e);
return;
}
//如果点击的是按钮，监听document鼠标移动事件
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;
//获取左右按钮的left值
this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
if (this.btnType === "leftBtn") {
//确定左边按钮的取值范围
if (x < 0) x = 0;
if (x > this.rightBtnLeft) x = this.rightBtnLeft;
this.leftBtn.style.left = x + "px";
} else if (this.btnType === "rightBtn") {
//确定右边按钮的取值范围，减去1px边框
if (x < this.leftBtnLeft) x = this.leftBtnLeft;
if (x > this.bgRange.offsetWidth - 2) x = this.bgRange.offsetWidth - 2;
this.rightBtn.style.left = x + "px";
}
//文字范围显示
this.changeRangeText();
break;
case "mouseup":
//移动事件监听
document.removeEventListener("mousemove", this.mouseHandlers);
document.removeEventListener("mouseup", this.mouseHandlers);
break;
}
}
rangeClick(e){
//计算出鼠标点击位置的值
let click_X=e.clientX-this.rangeContainer.getBoundingClientRect().x-this.leftBtn.offsetWidth/2;
//判断，如果当前点击的位置是在左边按钮的左侧、或者当左右按钮重叠时，点击的位置在按钮左侧，让左边按钮移动到鼠标点击的位置
if(Math.abs(click_X-this.leftBtnLeft)
Utils.js文件：是一个工具包文件。
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(/[A-Z]/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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
