现在前端做项目的过程中基本上都是有的组件库，像是element ui，ant design等。
但是这些组件库不能满足全部的需求，有时候需要单独引入第三方组件，例如文字滚动组件等。
但是有时后没有找到合适的第三方组件，这个时候才要迫不得已造轮子。
一般情况是不建议造轮子的，原因很简单咱们造的轮子不一定比别人造的好，并且工作效率低。
现在遇到这样一个需求，不同的区间对应不同的强弱程度。例如0-20：弱，20-40：中等，40-60：强，这些数字区间需要用户自己定义，并且区间不能叠加，
当让如果要求不严格可以让用户输入，这样要加逻辑判断，并且用户操作不直观。
所以用区间滑块是比较方便用户操作的，并且可视化强。产品的b格立马就上去了。造出来的效果如下:
但是我在网上搜了一下居然没找的这样的组件，不得已，只能造轮子了。下面开始：
第一步是拖动，关于拖动我想网上肯定是很多关于拖动的js。找一个用用就行了。
拖动js的算法是监听元素的点击事件，和body的鼠标移动事件。就可以计算出拖动距离。知道这些如果找到的不可用就自己需改一下。核心代码：
第二步是计算步长，因为再屏幕上100px的宽度，表示的有可能是10，也有可能是1000，并且要求移动数字只能是整数。这是简单的数学问题，相信同学们都可以解决。
第三步是计算拖动限制，就是弱值最大值（20），不能超过中等的最大值（40）。
第四步是向反方向移动。因为写的过程只考虑了值的增大，没考虑值的缩小。
全部代码如下，只看核心部分就行了。不必全部看懂，有些是对该项目的专用数据结构的转化。这个比较耗费时间。
代码地址：gitee.com/feng-lianxi…
造轮子是不容易的，大部分情况是我们知道大概的过程，并且能确定可以这么做，但是在做的过程中会发现好多细节比较耗费时间。
做这个要花掉1-2天的时间，如果用现成的轮子1-2个小时就搞定了。
所以不建议造轮子，除非是实在没办法了。
