首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现滑块区间组件

Posted in Javascript onJanuary 20, 2021

本文实例为大家分享了js实现滑块区间组件的具体代码，供大家参考，具体内容如下

功能需求：

1、最小值为0，按照给定的最大值，生成区间范围；
2、拖动滑块移动时，显示相应的范围区间，滑块条显示对应的状态；
3、点击时，使最近的滑块移动到鼠标点击的位置。

默认效果：

原生js实现滑块区间组件

当拖动滑块时，显示如下：

原生js实现滑块区间组件

分析：

  • 首先布局要写好，一共有4个元素，两个滑块和两个滑块条。布局时要考虑到后期对滑块和滑块条进行事件监听，尽可能少地出现事件冒泡；
  • 拖动滑块时，要区分是左边的滑块还是右边的滑块；
  • 鼠标的click事件和mousedown事件要兼容好，这里统一使用的是mousedown事件；
  • 要确定好左右滑块的最大最小 left 值；
  • 滑块条的显示就很简单了，宽度是左、右滑块的定位差值，left值是左滑块的left值；
  • 因为使用了事件委托机制，而在mousemove和mouseup事件中，无法判断当前操作的是哪一个滑块，所以要在鼠标按下时，将当前操作的对象传到mousemove事件中；

下面附上代码：

html结构，实例化滑块，可以设置当前滑块的区间范围：

<!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(){
  //参数为最大范围，不传的话默认是4000
  let slide=new Slide(4200);
  slide.appendTo("body");
 }

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

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=`<p class="priceTxt">价格<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);
 //设置样式
 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)<Math.abs(click_X-this.rightBtnLeft) || 
 (this.leftBtnLeft===this.rightBtnLeft && click_X<this.leftBtnLeft)) this.leftBtn.style.left=click_X+"px";
 //否则，让右边按钮移动到鼠标点击的位置
 else this.rightBtn.style.left=click_X+"px";
 //获取移动后的左右按钮的left值
 this.leftBtnLeft=parseInt(getComputedStyle(this.leftBtn).left);
 this.rightBtnLeft=parseInt(getComputedStyle(this.rightBtn).left);
 //文字范围显示
 this.changeRangeText();
 }
 changeRangeText(){
 //计算出最小范围与最大范围的值，四舍五入
 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}`;
 //滑块颜色的改变
 this.changeRangeSlide();
 }
 changeRangeSlide(){
 //滑块宽度等于左右按钮间的距离
 this.priceRange.style.width=this.rightBtnLeft-this.leftBtnLeft+"px";
 //滑块的left值等于左边按钮的left值
 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文件：是一个工具包文件。

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<elem.children.length;i++){
  Utils.getIdElem(elem.children[i],obj);
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生js实现滑块区间组件

- Author -

蒲公英芽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
js 匿名调用实现代码
Jun 19 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
原生js实现下拉框选择组件
Jan 20 #Javascript
原生js实现自定义滚动条组件
Jan 20 #Javascript
原生js实现自定义滚动条
Jan 20 #Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 #Javascript
JavaScript实现下拉列表
Jan 20 #Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
explain(2) Docker(14) HAM-2000(1) 守望先锋(1) 最终幻想(1) 波段(1) 西索(1) 帝国时代(1) AngularJS(2) 城市猎人(1)
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php上传excel表格并获取数据
2017/04/27 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
美国大尺码女装零售商：TORRID
2016/10/01 全球购物
斯巴达比赛商店：Spartan Race
2019/01/08 全球购物
新加坡第一大健康与美容零售商：屈臣氏新加坡（Watsons Singapore）
2020/12/11 全球购物
会计专业推荐信
2013/10/29 职场文书
大学生职业规划论文
2014/01/11 职场文书
前台文员我鉴定
2014/01/12 职场文书
亮剑精神观后感
2015/06/05 职场文书
学校隐患排查制度
2015/08/05 职场文书
初中物理教学反思
2016/02/19 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android