jqueryslider

功能描述

  1. jQuery自定义滑块插件

快速使用

  1. 滑块的值会绑定到 data-sliderValue
  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. // 默认
  18. $('.slider1').slider();
  20. // 最大最小值改变
  21. $('.slider2').slider({
  22.     minValue: 0,
  23.     maxValue: 180
  24. });
  26. // 设置初始值
  27. $('.slider3').slider({
  28.     minValue: 0,
  29.     maxValue: 100,
  30.     initValue: 60
  31. });
  33.  slider: function (config) {
  34.     var conf = {
  35.         // 是否活动
  36.         active: false,
  37.         // 按下的值
  38.         mousedownEvent: {},
  39.         // 滑块包裹层
  40.         sliderRange: null,
  41.         // 滑块按钮
  42.         slider: null,
  43.         // 滑块活动线
  44.         sliderActive: null,
  45.         // 滑块值显示
  46.         sliderValue: null,
  47.         // 滑块包裹层总宽
  48.         sliderRangeWidth: 0,
  49.         // 滑块按钮的一半宽度
  50.         sliderHalfWidth: 0,
  51.         // 最小值
  52.         minValue: 0,
  53.         // 最大值
  54.         maxValue: 100,
  55.         // 最大与最小的差
  56.         diffValue: 0,
  57.         // 初始值
  58.         initValue: 0
  59.     };
  60.     conf = $.extend(conf,config);
  61. }

特别说明