taizuduojie 2019-11-08
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
运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。以上实例中 7、5 和 12 是操作数。关系运算符用于计算结果是否为 true 或者 false。逻辑运算符用于测定变量或值之间的逻辑。