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/04/19