用原生TypeScript造轮子(五) 滑块Slider

ui参考primeNG:
http://primefaces.org/primeng…

ts开发环境:
https://github.com/lycHub/ts-…

目录

简介

仿造我之前用vue封装的iv-slider, 实现了其横向的一些功能:
本节demo源码
已实现的功能:

  • 支持移动端
  • 单/双滑块
  • 设置步长
  • 显示断点
  • 自定义事件

基本思路

先看dom,在鼠标滑动时,单滑块只要不断改变left值和蓝色条的width即可,双滑块还需要另外设置蓝色调的left

《用原生TypeScript造轮子(五) 滑块Slider》

滑块移动的位置和当前值有一个比例关系:
(当前值 / 数值范围) = (鼠标当前位置 – 鼠标起始位置) / slider总长度
其中数值范围是用户设置的max – min,默认100 – 0。

我这里是在求出当前值后再换算成dom值,滑块的left用的是百分比。

《用原生TypeScript造轮子(五) 滑块Slider》

其它功能如刻度,垂直,tooltip等可以参考iv-slider

    原文作者:李毅超
    原文地址: https://segmentfault.com/a/1190000019617488
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞