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', //下标文字大小 };