Vue实现双Slider

前端由于历史原因,基本上没有组件的概念,原生的 HTML 元素提供的功能非常简陋,所以都需要开发者自己实现或者定制组件。这次讲讲双 Slider 的实现。

# 技术选型

目前比较流行的 Vue 的组件库是ElementView UI。这两个组件库都使用了最常用的方法,使用div或者span,元素模拟滑动条,监听事件,并处理滑动。但是 HTML 元素本身提供了Range标签,我们可以修改下样式来使用,这样就避免自己直接处理事件监听,也可以减少浏览器兼容性问题。

# 样式定制化

目前针对 Range 元素的样式定制化还没有纳入 Web 标准,所以在处理起来稍微花点功夫。首先,我们需要修改默认的滑块样式。使用的 CSS 选择器是-webkit-slider-thumb。由于未纳入标准,需要使用浏览器前缀才行。这里我们可以借助 postcss-input-range 插件来完成这项工作。

# 双 Slider 实现

HTML 本身只提供了单滑块,要想实现双 Slider,只能两个叠加在一起了,并且需要自己实现 Slider 的选中范围,因为目前的 css selector 并不能达到这种效果。如何动态的控制 Slider 的显示长度呢?当然可以计算出目前的选中百分比,通过 css variables 来达到更新样式的效果。

# Slider 滑动规则

当然,我们左边的滑块不能滑过右边的滑块,这是基本常识。这里就需要监听input 事件,当超出范围的时候,强制把值重置回合法值就可以了。

# 实现效果

# 总结

能用原生 HTML 标签来解决的问题,尽量还是不要自己实现事件监听了。这样性能也会更好,兼容性上也不会太差。