MRange.min.js

$(function(){"use strict";function _onDragStart(evt){var rangeVal=this.isSingle?this.$label.html():this.$labelLow.html()+","+this.$labelHigh.html();this.trigger("dragstart",{value:rangeVal}),evt.preventDefault(),evt.stopPropagation(),$(evt.target).addClass("activate").siblings(".pointer").removeClass("activate"),this.$track.addClass("activate"),this.isSingle?this.$label.addClass("activate"):"low"===evt.data.type?(this.$labelLow.addClass("activate"),this.$labelHigh.removeClass("activate")):"high"===evt.data.type&&(this.$labelLow.removeClass("activate"),this.$labelHigh.addClass("activate"));var targetRect=this.$target.offset();$(document).on("mousemove.range touchmove.range",{type:evt.data.type,rect:targetRect,offset:{lowRect:this.$pointerLow.offset(),highRect:this.$pointerHigh.offset(),low:parseFloat(this.$pointerLow.css("left")),high:parseFloat(this.$pointerHigh.css("left"))}},$.proxy(_onDragMove,this)),$(document).on("mouseup.range touchend.range touchcancel.range",$.proxy(_onDragEnd,this))}function _onDragMove(evt){evt.preventDefault(),evt.stopPropagation();var moveBase=evt.data.rect.left,maxWidth=evt.data.rect.width,pointerType=evt.data.type,pointerOffset=evt.data.offset,curWidth=_getEventAttr(evt,"clientX")-moveBase;curWidth=0>curWidth?0:curWidth>maxWidth?maxWidth:curWidth;var $pointer=null,$label=null,trackWidth=0,pointerLeft=(curWidth/maxWidth*100).toFixed(3)+"%",labelValue=_getLabelValue(curWidth,maxWidth,this.option.min,this.option.max,this.option.step);if(this.isSingle)trackWidth=pointerLeft,$pointer=this.$pointer,$label=this.$label,this.$input.val(labelValue);else if("low"===pointerType){if(parseFloat(pointerLeft)>=pointerOffset.high)trackWidth=0,pointerLeft=pointerOffset.high+"%",labelValue=this.$labelHigh.html();else{var pointerHighRect=pointerOffset.highRect;curWidth=pointerHighRect.left-moveBase-curWidth+.5*pointerHighRect.width,trackWidth=(curWidth/maxWidth*100).toFixed(3)+"%"}$pointer=this.$pointerLow,$label=this.$labelLow,this.$track.css("left",pointerLeft)}else if("high"===pointerType){if(parseFloat(pointerLeft)<=pointerOffset.low)trackWidth=0,pointerLeft=pointerOffset.low+"%",labelValue=this.$labelLow.html();else{var pointerLowRect=pointerOffset.lowRect;curWidth=curWidth-(pointerLowRect.left-moveBase)-.5*pointerLowRect.width,trackWidth=(curWidth/maxWidth*100).toFixed(3)+"%"}$pointer=this.$pointerHigh,$label=this.$labelHigh}this.isSingle||this.$input.val(this.$labelLow.html()+","+this.$labelHigh.html());var rangeVal=this.isSingle?this.$label.html():this.$labelLow.html()+","+this.$labelHigh.html();this.trigger("dragmove",{value:rangeVal}),this.$track.css("width",trackWidth),$pointer.css("left",pointerLeft),$label.html(labelValue)}function _onDragEnd(evt){evt.preventDefault(),evt.stopPropagation(),$(document).off(".range");var rangeVal=this.isSingle?this.$label.html():this.$labelLow.html()+","+this.$labelHigh.html();this.trigger("dragend",{value:rangeVal}),this.$track.removeClass("activate"),this.$label.removeClass("activate"),this.$labelLow.removeClass("activate"),this.$labelHigh.removeClass("activate")}function _getEventAttr(evt,attr){var eventAttr=evt[attr];return eventAttr?eventAttr:evt.targetTouches&&evt.targetTouches.length?evt.targetTouches[0][attr]:evt.changedTouches&&evt.changedTouches.length?evt.changedTouches[0][attr]:void 0}function _getLabelValue(curWidth,maxWidth,minVal,maxVal,stepVal){var curStep=Number(curWidth).div(Number(maxWidth).div(Number(maxVal).sub(minVal))).div(stepVal),allStep=Number(maxVal).sub(minVal).div(stepVal),number=0;return number=Math.floor(curStep)<Math.floor(allStep)?Number(Math.round(curStep)).mul(stepVal).add(parseFloat(minVal)):Number(curStep).sub(Math.floor(curStep))>Number(allStep).sub(Math.floor(allStep)).mul(.5)?maxVal:Number(Math.floor(allStep)).mul(stepVal).add(parseFloat(minVal))}var MRange=function(target,option){this.$target=$(target),this.$input=$("input[data-input]",this.$target),this.$track=$("[data-track]",this.$target),this.$pointer=$("[data-pointer]",this.$target),this.$pointerLow=$("[data-pointer-low]",this.$target),this.$pointerHigh=$("[data-pointer-high]",this.$target),this.$label=$("[data-label]",this.$target),this.$labelLow=$("[data-label-low]",this.$target),this.$labelHigh=$("[data-label-high]",this.$target),this.option=$.extend({min:0,max:100,step:1,value:0},option),this.isSingle="number"==typeof this.option.value?!0:-1===this.option.value.indexOf(",");var min=parseFloat(this.option.min),max=parseFloat(this.option.max),step=parseFloat(this.option.step),value=this.isSingle?parseFloat(this.option.value):this.option.value.split(",");if(!(step>Math.abs(max-min)||min>max||this.isSingle&&(value>max||min>value))){if(!this.isSingle){var minVal=parseFloat(value[0]),maxVal=parseFloat(value[1]);if(maxVal>max||min>minVal||minVal>maxVal)return}this._EventHandle=$({}),this.init()}};MRange.prototype.on=function(){this._EventHandle.on.apply(this._EventHandle,arguments)},MRange.prototype.off=function(){this._EventHandle.off.apply(this._EventHandle,arguments)},MRange.prototype.trigger=function(){this._EventHandle.trigger.apply(this._EventHandle,arguments)},MRange.prototype.init=function(){this.eventHandle(),this.setTrack()},MRange.prototype.setTrack=function(option){this.option=$.extend(this.option,option);var min=this.option.min,max=this.option.max,value=this.isSingle?this.option.value:this.option.value.split(","),trackWidth=0;if(this.isSingle)trackWidth=Math.abs((value-min)/(max-min)*100).toFixed(3)+"%",this.$pointer.css("left",trackWidth).addClass("activate"),this.$label.html($.trim(value)),this.$input.val($.trim(value));else{trackWidth=Math.abs((value[1]-value[0])/(max-min)*100).toFixed(3)+"%";var pointerLeft=((value[0]-min)/(max-min)*100).toFixed(3)+"%",pointerRight=parseFloat(trackWidth)+parseFloat(pointerLeft)+"%";this.$track.css("left",pointerLeft),this.$pointerLow.css("left",pointerLeft),this.$pointerHigh.css("left",pointerRight),this.$labelLow.html($.trim(value[0])),this.$labelHigh.html($.trim(value[1])),this.$input.val($.trim(value[0])+","+$.trim(value[1])),parseFloat(pointerLeft)>100-parseFloat(pointerRight)||100===parseFloat(pointerLeft)?(this.$pointerLow.addClass("activate"),this.$pointerHigh.removeClass("activate")):(this.$pointerLow.removeClass("activate"),this.$pointerHigh.addClass("activate"))}this.$track.css("width",trackWidth)},MRange.prototype.getValue=function(){return this.isSingle?this.$label.html():this.$labelLow.html()+","+this.$labelHigh.html()},MRange.prototype.eventHandle=function(){this.$pointer.on("mousedown.range touchstart.range",{type:""},$.proxy(_onDragStart,this)),this.$pointerLow.on("mousedown.range touchstart.range",{type:"low"},$.proxy(_onDragStart,this)),this.$pointerHigh.on("mousedown.range touchstart.range",{type:"high"},$.proxy(_onDragStart,this))},MRange.prototype.destroy=function(){$(document).off(".range"),this.$pointer.off(".range"),this.$pointerLow.off(".range"),this.$pointerHigh.off(".range")},MRange.prototype.reset=function(){this.destroy(),this.init()},MRange.version="1.0.1",window.ahm=window.ahm||{},window.ahm.range=window.ahm.range||{},$('[data-role="range"]').each(function(){var targetData=this.dataset;window.ahm.range[targetData.name]=new MRange(this,{min:targetData.min,max:targetData.max,step:targetData.step,value:targetData.value})}),Math.add=function(num1,num2){var r1,r2,m;try{r1=num1.toString().split(".")[1].length}catch(e){r1=0}try{r2=num2.toString().split(".")[1].length}catch(e){r2=0}return m=Math.pow(10,Math.max(r1,r2)),(num1*m+num2*m)/m},Number.prototype.add=function(num){return Math.add(num,this)},Math.sub=function(num1,num2){return Math.add(num1,-num2)},Number.prototype.sub=function(num){return Math.sub(this,num)},Math.mul=function(num1,num2){var m=0,s1=num1.toString(),s2=num2.toString();try{m+=s1.split(".")[1].length}catch(e){}try{m+=s2.split(".")[1].length}catch(e){}return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)},Number.prototype.mul=function(num){return Math.mul(num,this)},Math.div=function(num1,num2){var r1,r2,t1=0,t2=0;try{t1=num1.toString().split(".")[1].length}catch(e){}try{t2=num2.toString().split(".")[1].length}catch(e){}return r1=Number(num1.toString().replace(".","")),r2=Number(num2.toString().replace(".","")),r1/r2*Math.pow(10,t2-t1)},Number.prototype.div=function(num){return Math.div(this,num)}});