用原生TypeScript造輪子（五） 滑塊Slider

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