h5实现slider滑块功能及样式自定义

公司最近人手不足,于是,又开始折腾起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.jpg

ps:中间虽然还有一些css没有给出,但是都是无关紧要的,比如div的class中ne-cell对应的css,就是一些常规的布局,相信会h5的肯定比我这个刚接触几天时间的人熟悉。另外,刚接触h5,写得有问题的地方多谢指出及纠正。

完成滑块功能时,也是网上找资料,其中主要借鉴了以下博文:
https://blog.csdn.net/u013347241/article/details/51560290

作者:ThinkinLiu
链接:https://www.jianshu.com/p/54fd0f8f8481
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

发表评论

必填项已用*标注