共计 373 个字符,预计需要花费 1 分钟才能阅读完成。
ui 参考 primeNG: http://primefaces.org/primeng…
ts 开发环境:https://github.com/lycHub/ts-…
目录
简介
仿造我之前用 vue 封装的 iv-slider, 实现了其横向的一些功能:
本节日历 demo 和源码
已实现的功能:
- 支持移动端
- 单 / 双滑块
- 设置步长
- 显示断点
- 自定义事件
基本思路
先看 dom,在鼠标滑动时,单滑块只要不断改变 left 值和蓝色条的 width 即可,双滑块还需要另外设置蓝色调的 left
滑块移动的位置和 当前值 有一个比例关系:
(当前值 / 数值范围) = (鼠标当前位置 – 鼠标起始位置) / slider 总长度
其中数值范围是用户设置的 max – min,默认 100 – 0。
我这里是在求出当前值后再换算成 dom 值,滑块的 left 用的是百分比。
其它功能如刻度,垂直,tooltip 等可以参考 iv-slider
正文完
发表至:无分类
2019-06-29