制作一个小滑块的艰苦历程

出于某些原因，需要在网页上用几个滑块。

其实，这是很简单的一件事情，只需敲一行html代码就可以了：

<input type="range" name="points" min="1" max="10">

耗时不超过一分钟，非常容易的一件事情。

不过这样不仅不美观，而且让人感觉很低端：

怎么办呢？其实也很简单，因为已经有人做好了，而且不仅做了滑块，交互页面上可能需要用到的东西都做好了，我们拿过来用即可。这一套东西就叫前端 UI 框架。

有一个框架叫layui，简单易用，花点时间阅读一下说明文档就可以了。做出来的滑块比默认的好看了。

但是很不幸的，做出来的滑块在PC端正常，但在手机端不能滑动，这是什么原因呢？

于是我开始排查起来：

会不会是手机浏览器兼容性问题呢？

会不会是我引用layui时出了什么问题呢？

会不会是我写的代码有问题呢？

会不会是浏览器缓存的问题呢？

按部就班地查了一遍，都没有问题。那么，问题十有八九在layui自身上了。很快，我的猜疑得到了印证：

糟糕透了！虽然我找到了问题所在，但几个小时时间也过去了。

layui不行了，那就换一个吧。有一个很热门的叫Element，据说是饿了吗团队开发的，我就选它了。

于是开始登录它的官网，在手机上测试了一下，确定能用之后就开始阅读文档，动手试着做了几个小例子，还挺好用。

正当我准备开始用Element在我的页面上添加滑块的时候，眼角的余光瞥见了浏览器上推送过来的几个字“Element停止维护”。

“有这事？”一边想着，一边搜了一下，还真是，停止维护了。

停止维护！虽然这对于我用Element做个滑块没有任何影响，滑块也依然能用，但我自身的执拗阻止了我继续使用Element。代价，就是差不多一个小时时间又废掉了。

接下来怎么办呢?要么再找一个框架，要么直接找一个单独的滑块组件来用。

找了几个单独的滑块组件，有的只支持低版本的jquery，有的有一些bug，都不尽如人意。

再找个框架嘛，又有诸多顾虑。比如这框架会不会又停止维护？

犹豫中，询问了一个做前端的小伙伴，扯了一会，快一个小时时间又过去了。

后来，我也懒得瞻前顾后了，直接用jquery-ui吧。

这是最后的样子，不好看，但也顾不了这么多了。

原本小小的一个问题，被我搞得这么复杂，这里边暴露了一些问题，其中就包括我的执拗。

如果有产品经理问我，加几个滑块需要多长时间？

我回答：“二十分钟吧！”

然后，我发现我掉入了一个深坑里。

再然后呢?

加班吧，兄弟！

后续：

后来还是有问题，于是干脆就用文章开头的原始方式：

<input type="range" name="points" min="1" max="10">

再修改修改样式，凑合能用就行了。