H5Slider

功能描述

H5Slider是高度自定义双滑块选择器，可按项目需求，调整各项功能

依赖插件

无

快速使用

  var slider = H5Slider({
      var from = 0;  //滑块开始值
      var to = 200;  //滑块结束值
      var step = 5;  //步长
      var format = 'KM'; //下标单位名
      var width = 300;  // 滑动条宽度
      var showLabels = true;  //是否显示下标文字
      var value = '15,50';  //滑块初始值，左边为开始值，右边为结束值 ，中间以,隔开(如果不填，将只出现1个滑块)
      getValue(function(start,end){
      console.log(start);
      console.log(end);
      })
  })

特别说明

from,to,step,format,width,showLabels,value （必填）

    选填(样式自定义):
      height   //华动条高度 (，默认 8px)
      SbgColor //选中滑动条背景色 (选填，默认'#c23D23')
      bgColor  //整条滑动条背景色 （选填，默认灰色渐变 格式：'linear-gradient(to bottom, #262626, #dddddd)'）
      firstblock = {    //可不写，有默认值 (一旦填写必须按该格式，否则有可能引起错误)
            'top': '-16px', //滑块相对于滑动条的高度（可按需求进行调整）
            'width': '38px', //滑块的宽度
            'height': '38px', //滑块的高度
            'border-radius': '19px', //滑块的圆角
            'border': '6px solid rgba(194,61,51,1)', //滑块的边框大小及边框颜色
      };
          var wordStyle = { //下标文字样式（默认）(一旦填写必须按该格式，否则有可能引起错误)
            'color': '#666', //下标文字颜色
            'background-color': '#ffffff', //下标文字背景颜色
            'top': '27px', //下标距离滑块的高度
            'font-size': '24px', //下标文字大小
          };
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18