自定义范围滑块

背景

原生的HTML5控件range input,每个浏览器的样式不同,为了达到统一的样式效果,我们通常有两种方案可以考虑,直接修改css样式,或者模拟出一个滑块控件。

解决方案

  1. 直接修改css样式。用-webkit-slider-thumb修改滑块样式,用-webkit-slider-runnable-track修改轨道样式,再结合:focus:hover等事件响应加上特效,让滑块更生动。
  2. 模拟出一个滑块控件。比如用div元素模拟range input样式,用mousedownmousemovemouseup等事件等来模拟input的行为

我们这篇博文简要介绍下如何仅通过css来控制input range的样式。

做一个简单的演示

或者点击我们的 在线Demo

兼容性

我们这里演示了webkit下的滑块样式,要想支持更多浏览器,还需要设置不同的伪类

  • ::-webkit-slider-thumb 针对webkit/blink 设置滑块

  • ::-moz-range-thumb 针对火狐设置滑块

  • ::-ms-thumb 针对IE设置滑块

还有背景条的设置

  • ::-webkit-slider-runnable-track 针对webkit/blink 设置背景条

  • ::-moz-range-track 针对火狐设置背景条

  • ::-ms-track/::-ms-fill-lower/::-ms-fill-upper 针对IE设置背景条

小技巧

我们在滑动条的中间位置放置了一条竖线,用于提示中间位置,竖线符号除了使用按键shift+\打出来之外,还有以下一些竖线的符号可以使用。

ǀǁ׀
ا

参考

更多的详细解读请参考以下博文

评论