- A+
公司最近人手不足，于是，又开始折腾起Html来了
本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动我们先来看看效果图
h5 slider.gif上图中，我们需要实现的难点就是那个绿色的滑块，其它都是输入框及文本框，容易实现。
滑块的实现
其实，只要设置input的type，即可实现滑块功能
效果如下：
range.jpg样式自定义
虽然实现了滑块的效果，但是感觉有点太丑了，主要是和设计相差太远，于是，我们来美化下，先看看css
有点多，说下关键点，thumb相关的是设置滑块按钮（即那个圆点）相关属性，track即那一条滑动条。
需要注意的是下面两行代码
background设置了-webkit，因为我这边是针对手机端；-linear-gradient表示线性渐变，括号中两个颜色值都是#40c35f，此时就是纯色的绿色；no-repeat表示背景图像仅出现一次，不会重复出现；最后的#cccccc则定义了右边没有滑到的区域为灰色。
而background-size设置了两个宽度百分比，分别是#40c35f占的百分比和#cccccc占的百分比，这里都是相对于整个滑块区域来讲的。
关于线性渐变，下面一张linear-gradient(#cccccc, #000000)供参考linear-gradient(#cccccc, #000000).png说完css，我们在来看看html
和之前的基本一致，这里没有设置min,max,step等，留在后面js中设置，没什么大的区别
这里注意，绑定的是公式输入有误input.css，这里我们改变background-size第一个百分比就可以达到左侧绿色覆盖的目的。
这里就完成了滑块的基本功能。刻度绘制
但是，离上面效果图还有蛮大差距的。比如上面的刻度，这里我取巧使用了宽度百分比来直接绘制了数字：
当然有很多更好的办法，至少可以写个js循环，但是第一次写h5，还是先实现功能再考虑优化吧。
到这里，我们就实现了一个滑块，效果图如下：slider.jpg与输入框联动
但是，最初的效果图中，滑块是可以和上方的输入框联动的。于是，我们再定义一个数字输入框：
要达到输入框内容跟着滑块变化，我们需要改下上面js中的change方法，让滑块滑动时，改变amount输入框的值
然后，当输入框输入数字时，我们的滑块也需要跟着一起移动：
至此，我们就完成了滑块及相关功能：
h5 slider.jpgps：中间虽然还有一些css没有给出，但是都是无关紧要的，比如div的class中ne-cell对应的css，就是一些常规的布局，相信会h5的肯定比我这个刚接触几天时间的人熟悉。另外，刚接触h5，写得有问题的地方多谢指出及纠正。
完成滑块功能时，也是网上找资料，其中主要借鉴了以下博文：
https://blog.csdn.net/u013347241/article/details/51560290作者：ThinkinLiu
链接：https://www.jianshu.com/p/54fd0f8f8481
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
我的微信公众号
我的微信公众号扫一扫
