rangeslider-pure/dist/range-slider.js

Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type="range"> slider element

(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t():typeof define==`function`&&define.amd?define([],t):(e=typeof globalThis<`u`?globalThis:e||self,e.rangeSlider=t())})(this,function(){var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},n=t({between:()=>f,debounce:()=>a,delay:()=>i,getFirstNumberLike:()=>l,isArray:()=>s,isNumberLike:()=>c,isObject:()=>u,isString:()=>o,simpleExtend:()=>d,uuid:()=>r}),r=()=>{let e=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);return e()+e()+`-`+e()+`-`+e()+`-`+e()+`-`+e()+e()+e()},i=(e,t,...n)=>setTimeout(()=>e.apply(null,n),t),a=(e,t=100)=>(...n)=>(e.debouncing||=(e.lastReturnVal=e.apply(window,n),!0),clearTimeout(e.debounceTimeout),e.debounceTimeout=setTimeout(()=>{e.debouncing=!1},t),e.lastReturnVal),o=e=>e===``+e,s=e=>Object.prototype.toString.call(e)===`[object Array]`,c=e=>e!=null&&(o(e)&&isFinite(parseFloat(e))||isFinite(e)),l=(...e)=>{if(!e.length)return null;for(let t=0,n=e.length;t<n;t++)if(c(e[t]))return e[t];return null},u=e=>Object.prototype.toString.call(e)===`[object Object]`,d=(e,t)=>{let n={};for(let t in e)n[t]=e[t];for(let e in t)n[e]=t[e];return n},f=(e,t,n)=>e<t?t:e>n?n:e,p=t({addClass:()=>C,addEventListeners:()=>O,detectIE:()=>h,forEachAncestors:()=>T,getDimension:()=>b,getHiddenParentNodes:()=>y,hasClass:()=>S,insertAfter:()=>D,isHidden:()=>v,removeAllListenersFromEl:()=>A,removeClass:()=>w,removeEventListeners:()=>k,setCss:()=>x,supportsRange:()=>j,triggerEvent:()=>E}),m=`eventListenerList`,h=()=>{let e=window.navigator.userAgent,t=e.indexOf(`MSIE `);if(t>0)return parseInt(e.substring(t+5,e.indexOf(`.`,t)),10);if(e.indexOf(`Trident/`)>0){let t=e.indexOf(`rv:`);return parseInt(e.substring(t+3,e.indexOf(`.`,t)),10)}let n=e.indexOf(`Edge/`);return n>0?parseInt(e.substring(n+5,e.indexOf(`.`,n)),10):!1},g=h(),_=window.PointerEvent&&!g?{passive:!1}:!1,v=e=>e.offsetWidth===0||e.offsetHeight===0||e.open===!1,y=e=>{let t=[],n=e.parentNode;for(;n&&v(n);)t.push(n),n=n.parentNode;return t},b=(e,t)=>{let n=y(e),r=n.length,i=[],a=e[t],o=e=>{e.open!==void 0&&(e.open=!e.open)};if(r){for(let e=0;e<r;e++)i.push({display:n[e].style.display,height:n[e].style.height,overflow:n[e].style.overflow,visibility:n[e].style.visibility}),n[e].style.display=`block`,n[e].style.height=`0`,n[e].style.overflow=`hidden`,n[e].style.visibility=`hidden`,o(n[e]);a=e[t];for(let e=0;e<r;e++)o(n[e]),n[e].style.display=i[e].display,n[e].style.height=i[e].height,n[e].style.overflow=i[e].overflow,n[e].style.visibility=i[e].visibility}return a},x=(e,t)=>{for(let n in t)e.style[n]=t[n];return e.style},S=(e,t)=>RegExp(` `+t+` `).test(` `+e.className+` `),C=(e,t)=>{S(e,t)||(e.className+=` `+t)},w=(e,t)=>{let n=` `+e.className.replace(/[\t\r\n]/g,` `)+` `;if(S(e,t)){for(;n.indexOf(` `+t+` `)>=0;)n=n.replace(` `+t+` `,` `);e.className=n.replace(/^\s+|\s+$/g,``)}},T=(e,t,n)=>{for(n&&t(e);e.parentNode&&!t(e);)e=e.parentNode;return e},E=(e,t,n)=>{if(!o(t))throw TypeError(`event name must be String`);if(!(e instanceof HTMLElement))throw TypeError(`element must be HTMLElement`);t=t.trim();let r=document.createEvent(`CustomEvent`);r.initCustomEvent(t,!1,!1,n),e.dispatchEvent(r)},D=(e,t)=>e.parentNode.insertBefore(t,e.nextSibling),O=(e,t,n)=>{t.forEach(t=>{e[m]||(e[m]={}),e[m][t]||(e[m][t]=[]),e.addEventListener(t,n,_),e[m][t].indexOf(n)<0&&e[m][t].push(n)})},k=(e,t,n)=>{t.forEach(t=>{let r;e.removeEventListener(t,n,_),e[m]&&e[m][t]&&(r=e[m][t].indexOf(n))>-1&&e[m][t].splice(r,1)})},A=(e,t)=>{if(!t[m])return;function n(t){t===e._startEventListener&&this.el.removeEventListener(this.eventName,t,!1)}for(let e in t[m])t[m][e].forEach(n,{eventName:e,el:t});t[m]={}},j=()=>{let e=document.createElement(`input`);return e.setAttribute(`type`,`range`),e.type!==`text`},M=/[\n\t]/g,N=100,P=300,F=50,I=`rangeSlider`,L=j(),R={polyfill:!0,root:document,rangeClass:`rangeSlider`,disabledClass:`rangeSlider--disabled`,fillClass:`rangeSlider__fill`,bufferClass:`rangeSlider__buffer`,handleClass:`rangeSlider__handle`,startEvent:[`mousedown`,`touchstart`,`pointerdown`],moveEvent:[`mousemove`,`touchmove`,`pointermove`],endEvent:[`mouseup`,`touchend`,`pointerup`],min:null,max:null,step:null,value:null,buffer:null,stick:null,borderRadius:10,vertical:!1},z=!1,B=class e{constructor(t,n){let i,a,o,u,f;if(e.instances.push(this),this.element=t,this.options=d(R,n),this.polyfill=this.options.polyfill,this.vertical=this.options.vertical,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideStart=this.options.onSlideStart,this.onSlideEnd=this.options.onSlideEnd,this.onSlideEventsCount=-1,this.isInteractsNow=!1,this.needTriggerEvents=!1,this._addVerticalSlideScrollFix(),!this.polyfill&&L)return;this.options.buffer=this.options.buffer||parseFloat(this.element.getAttribute(`data-buffer`)),this.identifier=`js-`+I+`-`+r(),this.min=l(this.options.min,parseFloat(this.element.getAttribute(`min`)),i=0),this.max=l(this.options.max,parseFloat(this.element.getAttribute(`max`)),a=N),this.value=l(this.options.value,this.element.value,parseFloat(this.element.value||this.min+(this.max-this.min)/2)),this.step=l(this.options.step,parseFloat(this.element.getAttribute(`step`))||(o=1)),this.percent=null,s(this.options.stick)&&this.options.stick.length>=1?this.stick=this.options.stick:(u=this.element.getAttribute(`stick`))&&(f=u.split(` `),f.length>=1&&(this.stick=f.map(parseFloat))),this.stick&&this.stick.length===1&&this.stick.push(this.step*1.5),this._updatePercentFromValue(),this.toFixed=this._toFixed(this.step);let p;this.container=document.createElement(`div`),C(this.container,this.options.fillClass),p=this.vertical?this.options.fillClass+`__vertical`:this.options.fillClass+`__horizontal`,C(this.container,p),this.handle=document.createElement(`div`),C(this.handle,this.options.handleClass),p=this.vertical?this.options.handleClass+`__vertical`:this.options.handleClass+`__horizontal`,C(this.handle,p),this.range=document.createElement(`div`),C(this.range,this.options.rangeClass),this.range.id=this.identifier;let m=t.getAttribute(`title`);m&&m.length>0&&this.range.setAttribute(`title`,m),this.options.bufferClass&&(this.buffer=document.createElement(`div`),C(this.buffer,this.options.bufferClass),this.range.appendChild(this.buffer),p=this.vertical?this.options.bufferClass+`__vertical`:this.options.bufferClass+`__horizontal`,C(this.buffer,p)),this.range.appendChild(this.container),this.range.appendChild(this.handle),p=this.vertical?this.options.rangeClass+`__vertical`:this.options.rangeClass+`__horizontal`,C(this.range,p),c(this.options.value)&&(this._setValue(this.options.value,!0),this.element.value=this.options.value),c(this.options.buffer)&&this.element.setAttribute(`data-buffer`,this.options.buffer),(c(this.options.min)||i)&&this.element.setAttribute(`min`,``+this.min),(c(this.options.max)||a)&&this.element.setAttribute(`max`,``+this.max),(c(this.options.step)||o)&&this.element.setAttribute(`step`,``+this.step),D(this.element,this.range),x(this.element,{position:`absolute`,width:`1px`,height:`1px`,overflow:`hidden`,opacity:`0`}),this._handleDown=this._handleDown.bind(this),this._handleMove=this._handleMove.bind(this),this._handleEnd=this._handleEnd.bind(this),this._startEventListener=this._startEventListener.bind(this),this._changeEventListener=this._changeEventListener.bind(this),this._handleResize=this._handleResize.bind(this),this._init(),window.addEventListener(`resize`,this._handleResize,!1),O(this.options.root,this.options.startEvent,this._startEventListener),this.element.addEventListener(`change`,this._changeEventListener,!1)}static create(t,n){let r=t=>{let r=t[I];r||(r=new e(t,n),t[I]=r)};t.length?Array.prototype.slice.call(t).forEach(function(e){r(e)}):r(t)}static _touchMoveScrollHandler(t){e.slidingVertically&&t.preventDefault()}update(e,t){return t&&(this.needTriggerEvents=!0),u(e)&&(c(e.min)&&(this.element.setAttribute(`min`,``+e.min),this.min=e.min),c(e.max)&&(this.element.setAttribute(`max`,``+e.max),this.max=e.max),c(e.step)&&(this.element.setAttribute(`step`,``+e.step),this.step=e.step,this.toFixed=this._toFixed(e.step)),c(e.buffer)&&this._setBufferPosition(e.buffer),c(e.value)&&this._setValue(e.value)),this._update(),this.onSlideEventsCount=0,this.needTriggerEvents=!1,this}destroy(){A(this,this.options.root),window.removeEventListener(`resize`,this._handleResize,!1),this.element.removeEventListener(`change`,this._changeEventListener,!1),this.element.style.cssText=``,delete this.element[I],this.range&&this.range.parentNode.removeChild(this.range),e.instances=e.instances.filter(e=>e!==this),e.instances.some(e=>e.vertical)||this._removeVerticalSlideScrollFix()}_toFixed(e){return(e+``).replace(`.`,``).length-1}_init(){this.onInit&&typeof this.onInit==`function`&&this.onInit(),this._update(!1)}_updatePercentFromValue(){this.percent=(this.value-this.min)/(this.max-this.min)}_startEventListener(e,t){let n=e.target,r=!1;e.which!==1&&!(`touches`in e)||(T(n,e=>r=e.id===this.identifier&&!S(e,this.options.disabledClass),!0),r&&this._handleDown(e,t))}_changeEventListener(e,t){if(t&&t.origin===this.identifier)return;let n=e.target.value,r=this._getPositionFromValue(n);this._setPosition(r)}_update(e){let t=this.vertical?`offsetHeight`:`offsetWidth`;this.handleSize=b(this.handle,t),this.rangeSize=b(this.range,t),this.maxHandleX=this.rangeSize-this.handleSize,this.grabX=this.handleSize/2,this.position=this._getPositionFromValue(this.value),this.element.disabled?C(this.range,this.options.disabledClass):w(this.range,this.options.disabledClass),this._setPosition(this.position),this.options.bufferClass&&this.options.buffer&&this._setBufferPosition(this.options.buffer),this._updatePercentFromValue(),e!==!1&&E(this.element,`change`,{origin:this.identifier})}_addVerticalSlideScrollFix(){this.vertical&&!z&&(document.addEventListener(`touchmove`,e._touchMoveScrollHandler,{passive:!1}),z=!0)}_removeVerticalSlideScrollFix(){document.removeEventListener(`touchmove`,e._touchMoveScrollHandler),z=!1}_handleResize(){return a(()=>{i(()=>{this._update()},P)},F)()}_handleDown(e){if(this.isInteractsNow=!0,e.preventDefault(),O(this.options.root,this.options.moveEvent,this._handleMove),O(this.options.root,this.options.endEvent,this._handleEnd),(` `+e.target.className+` `).replace(M,` `).indexOf(this.options.handleClass)>-1)return;let t=this.range.getBoundingClientRect(),n=this._getRelativePosition(e),r=this.vertical?t.bottom:t.left,i=this._getPositionFromNode(this.handle)-r,a=n-this.grabX;this._setPosition(a),n>=i&&n<i+this.options.borderRadius*2&&(this.grabX=n-i),this._updatePercentFromValue()}_handleMove(e){let t=this._getRelativePosition(e);this.isInteractsNow=!0,e.preventDefault(),this._setPosition(t-this.grabX)}_handleEnd(t){t.preventDefault(),k(this.options.root,this.options.moveEvent,this._handleMove),k(this.options.root,this.options.endEvent,this._handleEnd),E(this.element,`change`,{origin:this.identifier}),(this.isInteractsNow||this.needTriggerEvents)&&(this.onSlideEnd&&typeof this.onSlideEnd==`function`&&this.onSlideEnd(this.value,this.percent,this.position),this.vertical&&(e.slidingVertically=!1)),this.onSlideEventsCount=0,this.isInteractsNow=!1}_setPosition(t){let n,r,i,a,o=this._getValueFromPosition(f(t,0,this.maxHandleX));this.stick&&(a=this.stick[0],r=this.stick[1]||.1,i=o%a,i<r?o-=i:Math.abs(a-i)<r&&(o=o-i+a)),n=this._getPositionFromValue(o),this.vertical?(this.container.style.height=n+this.grabX+`px`,this.handle.style.webkitTransform=`translateY(-`+n+`px)`,this.handle.style.msTransform=`translateY(-`+n+`px)`,this.handle.style.transform=`translateY(-`+n+`px)`):(this.container.style.width=n+this.grabX+`px`,this.handle.style.webkitTransform=`translateX(`+n+`px)`,this.handle.style.msTransform=`translateX(`+n+`px)`,this.handle.style.transform=`translateX(`+n+`px)`),this._setValue(o),this.position=n,this.value=o,this._updatePercentFromValue(),(this.isInteractsNow||this.needTriggerEvents)&&(this.onSlideStart&&typeof this.onSlideStart==`function`&&this.onSlideEventsCount===0&&this.onSlideStart(this.value,this.percent,this.position),this.onSlide&&typeof this.onSlide==`function`&&this.onSlide(this.value,this.percent,this.position),this.vertical&&(e.slidingVertically=!0)),this.onSlideEventsCount++}_setBufferPosition(e){let t=!0;if(isFinite(e))e=parseFloat(e);else if(o(e))e.indexOf(`px`)>0&&(t=!1),e=parseFloat(e);else{console.warn(`New position must be XXpx or XX%`);return}if(isNaN(e)){console.warn(`New position is NaN`);return}if(!this.options.bufferClass){console.warn(`You disabled buffer, it's className is empty`);return}let n=t?e:e/this.rangeSize*100;n<0&&(n=0),n>100&&(n=100),this.options.buffer=n;let r=this.options.borderRadius/this.rangeSize*100,i=n-r;i<0&&(i=0),this.vertical?(this.buffer.style.height=i+`%`,this.buffer.style.bottom=r*.5+`%`):(this.buffer.style.width=i+`%`,this.buffer.style.left=r*.5+`%`),this.element.setAttribute(`data-buffer`,n)}_getPositionFromNode(e){let t=0;for(;e!==null;)t+=this.vertical?e.offsetTop:e.offsetLeft,e=e.offsetParent;return t}_getRelativePosition(e){let t=this.range.getBoundingClientRect(),n=this.vertical?t.bottom:t.left,r=0,i=this.vertical?`pageY`:`pageX`;return e[i]===void 0?e.originalEvent===void 0?e.touches&&e.touches[0]&&e.touches[0][i]!==void 0?r=e.touches[0][i]:e.currentPoint&&(e.currentPoint.x!==void 0||e.currentPoint.y!==void 0)&&(r=this.vertical?e.currentPoint.y:e.currentPoint.x):e.originalEvent[i]===void 0?e.originalEvent.touches&&e.originalEvent.touches[0]&&e.originalEvent.touches[0][i]!==void 0&&(r=e.originalEvent.touches[0][i]):r=e.originalEvent[i]:r=e.touches&&e.touches.length?e.touches[0][i]:e[i],this.vertical&&(r-=window.pageYOffset),this.vertical?n-r:r-n}_getPositionFromValue(e){let t=(e-this.min)/(this.max-this.min)*this.maxHandleX;return isNaN(t)?0:t}_getValueFromPosition(e){let t=e/(this.maxHandleX||1),n=this.step*Math.round(t*(this.max-this.min)/this.step)+this.min;return Number(n.toFixed(this.toFixed))}_setValue(e,t){e===this.value&&!t||(this.element.value=e,this.value=e,E(this.element,`input`,{origin:this.identifier}))}};return B.version=`0.5.0`,B.dom=p,B.functions=n,B.instances=[],B.slidingVertically=!1,B});
//# sourceMappingURL=range-slider.js.map