jqueryslider

功能描述

快速使用

  2. 自带jQuery版本为：3.3.1
  3. 纯中文注释，没有压缩文件，如需用到线上。请将文件压缩，去除注释！！！    
  4. 需要调用3个文件，slider.css，jquery.js，slider.js
  5. <link rel="stylesheet" href="./css/slider.css">
  6. <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  7. <script src="./js/slider.js"></script>
  9. html
  10. <div class="slider-range-package slider1"></div>
  12. <div class="slider-range-package slider2"></div>
  14. <div class="slider-range-package slider3"></div>
  16. js
  17. // 默认
  19. // 最大最小值改变
  21.     minValue: 0,
  22.     maxValue: 180
  23. });
  25. // 设置初始值
  26. $('.slider3').slider({
  27.     minValue: 0,
  28.     maxValue: 100,
  29.     initValue: 60
  30. });
  32.  slider: function (config) {
  33.     var conf = {
  34.         // 是否活动
  35.         active: false,
  36.         // 按下的值
  37.         mousedownEvent: {},
  38.         sliderRange: null,
  40.         slider: null,
  41.         // 滑块活动线
  42.         sliderActive: null,
  43.         // 滑块值显示
  44.         sliderValue: null,
  45.         // 滑块包裹层总宽
  46.         sliderRangeWidth: 0,
  47.         // 滑块按钮的一半宽度
  48.         sliderHalfWidth: 0,
  49.         // 最小值
  50.         minValue: 0,
  51.         // 最大值
  52.         maxValue: 100,
  53.         // 最大与最小的差
  54.         diffValue: 0,
  55.         // 初始值
  56.         initValue: 0
  57.     };

特别说明