出于某些原因，需要在網(wǎng)頁上用幾個(gè)滑塊。

其實(shí)，這是很簡(jiǎn)單的一件事情，只需敲一行html代碼就可以了：

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

耗時(shí)不超過一分鐘，非常容易的一件事情。

不過這樣不僅不美觀，而且讓人感覺很低端：

怎么辦呢？其實(shí)也很簡(jiǎn)單，因?yàn)橐呀?jīng)有人做好了，而且不僅做了滑塊，交互頁面上可能需要用到的東西都做好了，我們拿過來用即可。這一套東西就叫前端 UI 框架。

有一個(gè)框架叫l(wèi)ayui，簡(jiǎn)單易用，花點(diǎn)時(shí)間閱讀一下說明文檔就可以了。做出來的滑塊比默認(rèn)的好看了。

但是很不幸的，做出來的滑塊在PC端正常，但在手機(jī)端不能滑動(dòng)，這是什么原因呢？

于是我開始排查起來：

會(huì)不會(huì)是手機(jī)瀏覽器兼容性問題呢？

會(huì)不會(huì)是我引用layui時(shí)出了什么問題呢？

會(huì)不會(huì)是我寫的代碼有問題呢？

會(huì)不會(huì)是瀏覽器緩存的問題呢？

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

糟糕透了！雖然我找到了問題所在，但幾個(gè)小時(shí)時(shí)間也過去了。

layui不行了，那就換一個(gè)吧。有一個(gè)很熱門的叫Element，據(jù)說是餓了嗎團(tuán)隊(duì)開發(fā)的，我就選它了。

于是開始登錄它的官網(wǎng)，在手機(jī)上測(cè)試了一下，確定能用之后就開始閱讀文檔，動(dòng)手試著做了幾個(gè)小例子，還挺好用。

正當(dāng)我準(zhǔn)備開始用Element在我的頁面上添加滑塊的時(shí)候，眼角的余光瞥見了瀏覽器上推送過來的幾個(gè)字“Element停止維護(hù)”。

“有這事？”一邊想著，一邊搜了一下，還真是，停止維護(hù)了。

停止維護(hù)！雖然這對(duì)于我用Element做個(gè)滑塊沒有任何影響，滑塊也依然能用，但我自身的執(zhí)拗阻止了我繼續(xù)使用Element。代價(jià)，就是差不多一個(gè)小時(shí)時(shí)間又廢掉了。

接下來怎么辦呢?要么再找一個(gè)框架，要么直接找一個(gè)單獨(dú)的滑塊組件來用。

找了幾個(gè)單獨(dú)的滑塊組件，有的只支持低版本的jquery，有的有一些bug，都不盡如人意。

再找個(gè)框架嘛，又有諸多顧慮。比如這框架會(huì)不會(huì)又停止維護(hù)？

猶豫中，詢問了一個(gè)做前端的小伙伴，扯了一會(huì)，快一個(gè)小時(shí)時(shí)間又過去了。

后來，我也懶得瞻前顧后了，直接用jquery-ui吧。

這是最后的樣子，不好看，但也顧不了這么多了。

原本小小的一個(gè)問題，被我搞得這么復(fù)雜，這里邊暴露了一些問題，其中就包括我的執(zhí)拗。

如果有產(chǎn)品經(jīng)理問我，加幾個(gè)滑塊需要多長(zhǎng)時(shí)間？

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

然后，我發(fā)現(xiàn)我掉入了一個(gè)深坑里。

再然后呢?

加班吧，兄弟！

后續(xù)：

后來還是有問題，于是干脆就用文章開頭的原始方式：

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

再修改修改樣式，湊合能用就行了。