教你用原生JS编辑一个滑块组件
发布时间：2022-04-20 08:58:05 所属栏目：语言 来源：互联网
导读：滑块组件就是一个允许用户在有限区间内通过移动滑块来选择值的组件。滑块组件的应用是比较常见的，例如商品价格区间筛选，音量设置，滑块验证等等。这篇文章就给大家介绍一下用原生JS实现滑块组件，下面是实现效果，功能分析以及代码。 功能需求： 1、最小值
|
滑块组件就是一个允许用户在有限区间内通过移动滑块来选择值的组件。滑块组件的应用是比较常见的，例如商品价格区间筛选，音量设置，滑块验证等等。这篇文章就给大家介绍一下用原生JS实现滑块组件，下面是实现效果，功能分析以及代码。 功能需求： 1、最小值为0，按照给定的最大值，生成区间范围； 2、拖动滑块移动时，显示相应的范围区间，滑块条显示对应的状态； 3、点击时，使最近的滑块移动到鼠标点击的位置。 分析： 首先布局要写好，一共有4个元素，两个滑块和两个滑块条。布局时要考虑到后期对滑块和滑块条进行事件监听，尽可能少地出现事件冒泡； 拖动滑块时，要区分是左边的滑块还是右边的滑块； 鼠标的click事件和mousedown事件要兼容好，这里统一使用的是mousedown事件； 要确定好左右滑块的最大最小 left 值； 滑块条的显示就很简单了，宽度是左、右滑块的定位差值，left值是左滑块的left值； 因为使用了事件委托机制，而在mousemove和mouseup事件中，无法判断当前操作的是哪一个滑块，所以要在鼠标按下时，将当前操作的对象传到mousemove事件中； 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事件 （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
