@maslick/radiaslider - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

dist/slider-circular.min.js

@@ -1,1 +0,1 @@
-(function(){var b=Math.PI;function a(a){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5*b+1e-6,this.endAngle=1.5*b-1e-6,this.continuousMode=a.continuousMode||!1,this.container=document.getElementById(a.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.x0=a.x0===void 0?this.container.width/2:a.x0,this.y0=a.y0===void 0?this.container.height/2:a.y0,this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}a.prototype.addSlider=function(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",min:a.min||0,max:a.max||100,radius:a.radius||100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:a.changed||function(){},ang_degrees:0,normalizedValue:a.min||0,step:a.step||1};var b=this.sliders[a.id];this.setSliderValue(b.id,a.min)},a.prototype.setSliderValue=function(a,c){var d=this.sliders[a];c<=d.min?(d.endAngle=this.startAngle,d.ang_degrees=0,d.normalizedValue=0):c>=d.max?(d.endAngle=this.endAngle,d.ang_degrees=360,d.normalizedValue=d.max):(d.endAngle=2*b*(c-d.min)/(d.max-d.min)-b/2,d.ang_degrees=this.radToDeg(this.normalizeTan(d.endAngle)),d.normalizedValue=c),this.drawAll()},a.prototype.drawAll=function(){for(var a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(a)){var b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawArrow(b),this.drawKnob(b),b.onValueChangeCallback({rad:b.endAngle,deg:b.ang_degrees,value:b.normalizedValue})}this.drawCenterDot()},a.prototype.drawScale=function(a){for(var c=0;c<=2*b;c+=b/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,a.radius,c,c+b/6,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()},a.prototype.drawCenterDot=function(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},a.prototype.drawData=function(a){this.context.beginPath(),this.context.strokeStyle=a.color,this.context.arc(this.x0,this.y0,a.radius,a.startAngle,a.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()},a.prototype.drawArrow=function(a){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-a.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()},a.prototype.drawKnob=function(a){var c=Math.sin,d=Math.cos;this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(d(a.endAngle)*a.radius+this.x0,c(a.endAngle)*a.radius+this.y0,this.knobWidth/2,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(d(a.endAngle)*a.radius+this.x0,c(a.endAngle)*a.radius+this.y0,this.scaleWidth/10,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},a.prototype.calculateAngles=function(a,c){var d=Math.atan2;if(this.selectedSlider){var e=this.selectedSlider.max,f=this.selectedSlider.min,g=this.selectedSlider.step,h=d(c-this.y0,a-this.x0),i=this.radToDeg(this.normalizeTan(h)),j=this.normalizeTan(h)*(e-f)/(2*b)+f;j=(j/g>>0)*g,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=i,this.selectedSlider.normalizedValue=j}},a.prototype.radToDeg=function(a){return 180*a/b},a.prototype.normalizeTan=function(a){var c=0<a+b/2?a+b/2:2*b+a+b/2;return c},a.prototype.calculateUserCursor=function(){var a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)},a.prototype.getSelectedSlider=function(){var a=Math.pow;this.calculateUserCursor();var b=Math.sqrt(a(this.MouseX-this.x0,2)+a(this.MouseY-this.y0,2));for(var c in this.sliders)if(this.sliders.hasOwnProperty(c)){var d=this.sliders[c];if(Math.abs(b-d.radius)<=this.scaleWidth/2){var e=d;break}}return e?e:null},a.prototype._handleMouseDown=function(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},a.prototype._handleMouseUp=function(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},a.prototype._handleClick=function(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()},a.prototype._handleTouch=function(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},a.prototype._handleMove=function(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},a.prototype._handleEnd=function(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},a.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a:window.Slider=a})();
+(function(){var a=Math.PI;class b{constructor(b){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5*a+1e-6,this.endAngle=1.5*a-1e-6,this.continuousMode=b.continuousMode||!1,this.container=document.getElementById(b.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.x0=b.x0===void 0?this.container.width/2:b.x0,this.y0=b.y0===void 0?this.container.height/2:b.y0,this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",min:a.min||0,max:a.max||100,radius:a.radius||100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:a.changed||function(){},ang_degrees:0,normalizedValue:a.min||0,step:a.step||1};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(c,d){const e=this.sliders[c];d<=e.min?(e.endAngle=this.startAngle,e.ang_degrees=0,e.normalizedValue=0):d>=e.max?(e.endAngle=this.endAngle,e.ang_degrees=360,e.normalizedValue=e.max):(e.endAngle=2*a*(d-e.min)/(e.max-e.min)-a/2,e.ang_degrees=b.radToDeg(b.normalizeTan(e.endAngle)),e.normalizedValue=d),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawArrow(b),this.drawKnob(b),b.onValueChangeCallback({rad:b.endAngle,deg:b.ang_degrees,value:b.normalizedValue})}this.drawCenterDot()}drawScale(b){for(let c=0;c<=2*a;c+=a/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,b.radius,c,c+a/4,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()}drawCenterDot(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){this.context.beginPath(),this.context.strokeStyle=a.color,this.context.arc(this.x0,this.y0,a.radius,a.startAngle,a.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawArrow(a){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-a.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()}drawKnob(b){var c=Math.sin,d=Math.cos;this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateAngles(c,d){if(!this.selectedSlider)return;let e=this.selectedSlider.max,f=this.selectedSlider.min,g=this.selectedSlider.step,h=Math.atan2(d-this.y0,c-this.x0),i=b.radToDeg(b.normalizeTan(h)),j=b.normalizeTan(h)*(e-f)/(2*a)+f;j=(j/g>>0)*g,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=i,this.selectedSlider.normalizedValue=j}static radToDeg(b){return 180*b/a}static normalizeTan(b){return 0<b+a/2?b+a/2:2*a+b+a/2}calculateUserCursor(){const a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){var a=Math.pow;this.calculateUserCursor();const b=Math.sqrt(a(this.MouseX-this.x0,2)+a(this.MouseY-this.y0,2));let c;for(let a in this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const d=this.sliders[a];if(Math.abs(b-d.radius)<=this.scaleWidth/2){c=d;break}}return c?c:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();

dist/slider-linear.min.js

@@ -1,1 +0,1 @@
-(function(){var b=Math.PI;function a(a){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.continuousMode=a.continuousMode||!1,this.vertical=a.vertical||!1,this.container=document.getElementById(a.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}a.prototype.addSlider=function(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",width:a.width||100,min:a.min||0,max:a.max||100,step:a.step||1,x0:a.x0||0,y0:a.y0||0,onValueChangeCallback:a.changed||function(){},value:0,normalizedValue:a.min||0};var b=this.sliders[a.id];this.setSliderValue(b.id,a.min)},a.prototype.setSliderValue=function(a,b){var c=this.sliders[a];b<=c.min?(c.value=0,c.normalizedValue=c.min):b>=c.max?(c.value=c.width,c.normalizedValue=c.max):(c.value=c.width*(b-c.min)/(c.max-c.min),c.normalizedValue=b),this.drawAll()},a.prototype.drawAll=function(){for(var a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(a)){var b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawKnob(b),b.onValueChangeCallback({width:b.value,value:b.normalizedValue})}},a.prototype.drawScale=function(a){var c=this.vertical?0:1,d=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=a.color,this.context.arc(a.x0+c,a.y0-d,this.scaleWidth/2,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle=a.color,this.context.fill();var e,f;this.vertical?(e=a.x0,f=a.y0-a.width):(e=a.x0+a.width,f=a.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(a.x0,a.y0),this.context.lineTo(e,f),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,f,this.scaleWidth/2,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},a.prototype.drawData=function(a){var b,c;this.vertical?(b=a.x0,c=a.y0-a.value):(b=a.x0+a.value,c=a.y0),this.context.beginPath(),this.context.strokeStyle=a.color,this.context.moveTo(a.x0,a.y0),this.context.lineTo(b,c),this.context.lineWidth=this.fillWidth,this.context.stroke()},a.prototype.drawKnob=function(a){var c,d;this.vertical?(c=a.x0,d=a.y0-a.value):(c=a.x0+a.value,d=a.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(c,d,this.knobWidth/2,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(c,d,this.scaleWidth/10,0,2*b,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},a.prototype.calculateValues=function(a,b){if(this.selectedSlider){var c,d=this.selectedSlider.max,e=this.selectedSlider.min,f=this.selectedSlider.step,g=this.selectedSlider.width;c=this.vertical?this.selectedSlider.y0-b:a-this.selectedSlider.x0;var h=c;h>this.selectedSlider.width-this.selectedSlider.step&&(h=this.selectedSlider.width),h<0+this.selectedSlider.step&&(h=0);var i=h*(d-e)/g+e;i=(i/f>>0)*f,this.selectedSlider.value=h,this.selectedSlider.normalizedValue=i}},a.prototype.calculateUserCursor=function(){var a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)},a.prototype.getSelectedSlider=function(){for(var a in this.calculateUserCursor(),this.sliders)if(this.sliders.hasOwnProperty(a)){var b,c,d=this.sliders[a];if(this.vertical?(b=this.MouseX>=d.x0-this.scaleWidth/2&&this.MouseX<=d.x0+this.scaleWidth/2,c=this.MouseY>=d.y0-d.width-this.scaleWidth/2&&this.MouseY<=d.y0+this.scaleWidth/2):(b=this.MouseX>=d.x0-this.scaleWidth/2&&this.MouseX<=d.x0+d.width+this.scaleWidth/2,c=this.MouseY>=d.y0-this.scaleWidth/2&&this.MouseY<=d.y0+this.scaleWidth/2),b&&c){var e=d;break}}return e?e:null},a.prototype._handleMouseDown=function(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},a.prototype._handleMouseUp=function(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},a.prototype._handleClick=function(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()},a.prototype._handleTouch=function(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},a.prototype._handleMove=function(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},a.prototype._handleEnd=function(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},a.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a:window.Slider=a})();
+(function(){var a=Math.PI;class b{constructor(a){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.continuousMode=a.continuousMode||!1,this.vertical=a.vertical||!1,this.container=document.getElementById(a.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",width:a.width||100,min:a.min||0,max:a.max||100,step:a.step||1,x0:a.x0||0,y0:a.y0||0,onValueChangeCallback:a.changed||function(){},value:0,normalizedValue:a.min||0};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(a,b){const c=this.sliders[a];b<=c.min?(c.value=0,c.normalizedValue=c.min):b>=c.max?(c.value=c.width,c.normalizedValue=c.max):(c.value=c.width*(b-c.min)/(c.max-c.min),c.normalizedValue=b),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawKnob(b),b.onValueChangeCallback({width:b.value,value:b.normalizedValue})}}drawScale(b){let c=this.vertical?0:1,d=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=b.color,this.context.arc(b.x0+c,b.y0-d,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle=b.color,this.context.fill();let e,f;this.vertical?(e=b.x0,f=b.y0-b.width):(e=b.x0+b.width,f=b.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(b.x0,b.y0),this.context.lineTo(e,f),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,f,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){let b,c;this.vertical?(b=a.x0,c=a.y0-a.value):(b=a.x0+a.value,c=a.y0),this.context.beginPath(),this.context.strokeStyle=a.color,this.context.moveTo(a.x0,a.y0),this.context.lineTo(b,c),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawKnob(b){let c,d;this.vertical?(c=b.x0,d=b.y0-b.value):(c=b.x0+b.value,d=b.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(c,d,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(c,d,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateValues(a,b){if(!this.selectedSlider)return;let c,d=this.selectedSlider.max,e=this.selectedSlider.min,f=this.selectedSlider.step,g=this.selectedSlider.width;c=this.vertical?this.selectedSlider.y0-b:a-this.selectedSlider.x0;let h=c;h>this.selectedSlider.width-this.selectedSlider.step&&(h=this.selectedSlider.width),h<0+this.selectedSlider.step&&(h=0);let i=h*(d-e)/g+e;i=(i/f>>0)*f,this.selectedSlider.value=h,this.selectedSlider.normalizedValue=i}calculateUserCursor(){let a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){this.calculateUserCursor();let a;for(let b in this.sliders){if(!this.sliders.hasOwnProperty(b))continue;let c,d,e=this.sliders[b];if(this.vertical?(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+this.scaleWidth/2,d=this.MouseY>=e.y0-e.width-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2):(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+e.width+this.scaleWidth/2,d=this.MouseY>=e.y0-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2),c&&d){a=e;break}}return a?a:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();

package.json

 {
   "name": "@maslick/radiaslider",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "nice looking canvas-based radial and linear slider",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -16,3 +16,3 @@ # =radiaSlider=
  * no dependencies
- * pure JavaScript (ES5)
+ * pure JavaScript (ES6)
  * browser and Node.js friendly
@@ -45,3 +45,3 @@ ```
 <script>
-  var slider = new Slider({ canvasId: "myCanvas", continuousMode: true, x0: 150, y0: 150 });
+  let slider = new Slider({ canvasId: "myCanvas", continuousMode: true, x0: 150, y0: 150 });
   slider.addSlider({
@@ -70,3 +70,3 @@ id: 1,
 <script>
-  var slider = new Slider({ canvasId: "myCanvas",  continuousMode: true,  vertical: false });
+  let slider = new Slider({ canvasId: "myCanvas",  continuousMode: true,  vertical: false });
   slider.addSlider({
@@ -73,0 +73,0 @@ id: 1

src/slider-circular.js

 (function () {
-    function Slider(options) {
-        this.sliders = {};
-        this.scaleWidth = 35;
-        this.fillWidth = 35;
-        this.knobWidth = 35;
+    class Slider {
+        constructor(options) {
+            this.sliders = {};
+            this.scaleWidth = 35;
+            this.fillWidth = 35;
+            this.knobWidth = 35;
 
-        this.startAngle = 1.5 * Math.PI + 0.000001;
-        this.endAngle = 1.5 * Math.PI - 0.000001;
+            this.startAngle = 1.5 * Math.PI + 0.000001;
+            this.endAngle = 1.5 * Math.PI - 0.000001;
 
-        this.continuousMode = options.continuousMode || false;
+            this.continuousMode = options.continuousMode || false;
 
-        this.container = document.getElementById(options.canvasId);
-        this.the_body = document.body;
-        this.context = this.container.getContext('2d');
+            this.container = document.getElementById(options.canvasId);
+            this.the_body = document.body;
+            this.context = this.container.getContext('2d');
 
-        this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0;
-        this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0;
+            this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0;
+            this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0;
 
-        this.MouseX = 0;
-        this.MouseY = 0;
+            this.MouseX = 0;
+            this.MouseY = 0;
 
-        this.selectedSlider = null;
-        this.currentSlider = null;
+            this.selectedSlider = null;
+            this.currentSlider = null;
 
-        this.rotationEventListener = this._rotation.bind(this);
-        this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
-        this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
-        this.container.addEventListener('click', this._handleClick.bind(this), false);
+            this.rotationEventListener = this._rotation.bind(this);
+            this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
+            this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
+            this.container.addEventListener('click', this._handleClick.bind(this), false);
 
 
-        this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
-        this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
-        this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
+            this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
+            this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
+            this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
+        }
 
-    }
+        // Adds a slider band to the slider
+        addSlider(options) {
+            this.sliders[options.id] = {
+                id: options.id,
+                container: document.getElementById(options.container),
+                color: options.color || '#104b63',
+                min: options.min || 0,
+                max: options.max || 100,
+                radius: options.radius || 100,
+                startAngle: this.startAngle,
+                endAngle: this.endAngle,
+                onValueChangeCallback: options.changed || function (v) {},
+                ang_degrees: 0,
+                normalizedValue: options.min || 0,
+                step: options.step || 1
+            };
 
+            const obj = this.sliders[options.id];
+            this.setSliderValue(obj.id, options.min);
+        }
 
-    // Adds a slider band to the slider
-    Slider.prototype.addSlider = function (options) {
-        this.sliders[options.id] = {
-            id: options.id,
-            container: document.getElementById(options.container),
-            color: options.color || '#104b63',
-            min: options.min || 0,
-            max: options.max || 100,
-            radius: options.radius || 100,
-            startAngle: this.startAngle,
-            endAngle: this.endAngle,
-            onValueChangeCallback: options.changed || function(v) {},
-            ang_degrees: 0,
-            normalizedValue: options.min || 0,
-            step: options.step || 1
-        };
+        // Sets (draws) slider band value given the band id and value
+        setSliderValue(id, value) {
+            const slider = this.sliders[id];
+            if (value <= slider.min) {
+                slider.endAngle = this.startAngle;
+                slider.ang_degrees = 0;
+                slider.normalizedValue = 0;
+            } else if (value >= slider.max) {
+                slider.endAngle = this.endAngle;
+                slider.ang_degrees = 360;
+                slider.normalizedValue = slider.max;
+            } else {
+                //value = (value / slider.step >> 0) * slider.step;
+                slider.endAngle = 2 * Math.PI * (value - slider.min) / (slider.max - slider.min) - Math.PI / 2;
+                slider.ang_degrees = Slider.radToDeg(Slider.normalizeTan(slider.endAngle));
+                slider.normalizedValue = value;
+            }
 
-        var obj = this.sliders[options.id];
-        //obj.da = Math.abs(2*Math.PI*obj.step/(obj.max-obj.min));
+            this.drawAll();
+        }
 
-        this.setSliderValue(obj.id, options.min);
-    };
+        // Redraws everything
+        drawAll() {
+            this.context.clearRect(0, 0, this.container.width, this.container.height);
+            for (let key in this.sliders) {
+                if (!this.sliders.hasOwnProperty(key)) continue;
+                const obj = this.sliders[key];
+                this.drawScale(obj);
+                this.drawData(obj);
+                this.drawArrow(obj);
+                this.drawKnob(obj);
+                obj.onValueChangeCallback({'rad': obj.endAngle, 'deg': obj.ang_degrees, 'value': obj.normalizedValue});
+            }
+            this.drawCenterDot();
+        }
 
-    // Sets (draws) slider band value given the band id and value
-    Slider.prototype.setSliderValue = function (id, value) {
-        var slider = this.sliders[id];
-        if (value <= slider.min) {
-            slider.endAngle = this.startAngle;
-            slider.ang_degrees = 0;
-            slider.normalizedValue = 0;
+        // Draw the scale for a selected slider band
+        drawScale(slider) {
+            // Scale
+            for (let i = 0; i <= 2 * Math.PI; i += Math.PI / 6) {
+                this.context.beginPath();
+                this.context.strokeStyle = '#eeeeee';
+                this.context.arc(this.x0, this.y0, slider.radius, i, i + Math.PI / 4, false);
+                this.context.lineWidth = this.scaleWidth;
+                this.context.stroke();
+            }
         }
-        else if (value >= slider.max) {
-            slider.endAngle = this.endAngle;
-            slider.ang_degrees = 360;
-            slider.normalizedValue = slider.max;
-        }
-        else {
-            //value = (value / slider.step >> 0) * slider.step;
-            slider.endAngle = 2 * Math.PI * (value - slider.min) / (slider.max - slider.min) - Math.PI/2;
-            slider.ang_degrees = this.radToDeg(this.normalizeTan(slider.endAngle));
-            slider.normalizedValue = value;
-        }
 
-        this.drawAll();
-    };
-
-    // Redraws everything
-    Slider.prototype.drawAll = function () {
-        this.context.clearRect(0, 0, this.container.width, this.container.height);
-        for (var key in this.sliders) {
-            if (!this.sliders.hasOwnProperty(key)) continue;
-            var obj = this.sliders[key];
-            this.drawScale(obj);
-            this.drawData(obj);
-            this.drawArrow(obj);
-            this.drawKnob(obj);
-            obj.onValueChangeCallback({'rad': obj.endAngle, 'deg': obj.ang_degrees, 'value': obj.normalizedValue});
+        // Draw dot in the center
+        drawCenterDot () {
+            this.context.beginPath();
+            this.context.strokeStyle = '#eeeeee';
+            this.context.arc(this.x0, this.y0, this.scaleWidth/2, 0, Math.PI*2, false);
+            this.context.lineWidth = 1;
+            this.context.fillStyle = '#eeeeee';
+            this.context.fill();
         }
-        this.drawCenterDot();
-    };
 
-    // Draw the scale for a selected slider band
-    Slider.prototype.drawScale = function(slider) {
-        // Scale
-        for (var i = 0; i <= Math.PI * 2; i += Math.PI / 6) {
+        // Draw the data on the selected slider band
+        drawData(slider) {
             this.context.beginPath();
-            this.context.strokeStyle = '#eeeeee';
-            this.context.arc(this.x0, this.y0, slider.radius, i, i + Math.PI / 6, false);
-            this.context.lineWidth = this.scaleWidth;
+            this.context.strokeStyle = slider.color;
+            this.context.arc(this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false);
+            this.context.lineWidth = this.fillWidth;
             this.context.stroke();
         }
 
-    };
+        // Draw tail arrow
+        drawArrow(slider) {
+            this.context.beginPath();
+            this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2);
+            this.context.lineTo(this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2);
+            this.context.lineTo(this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2);
+            this.context.fillStyle = "#eeeeee";
+            this.context.fill();
+        }
 
-    // Draw dot in the center
-    Slider.prototype.drawCenterDot = function () {
-        this.context.beginPath();
-        this.context.strokeStyle = '#eeeeee';
-        this.context.arc(this.x0, this.y0, this.scaleWidth/2, 0, Math.PI*2, false);
-        this.context.lineWidth = 1;
-        this.context.fillStyle = '#eeeeee';
-        this.context.fill();
-    };
+        // Draw the knob (control element)
+        drawKnob(slider) {
+            // Knob
+            this.context.beginPath();
+            this.context.strokeStyle = '#eb879c';
+            this.context.arc(
+                Math.cos(slider.endAngle) * slider.radius + this.x0,
+                Math.sin(slider.endAngle) * slider.radius + this.y0,
+                this.knobWidth / 2,
+                0, Math.PI * 2, false
+            );
+            this.context.lineWidth = 1;
 
-    // Draw the data on the selected slider band
-    Slider.prototype.drawData = function(slider) {
-        this.context.beginPath();
-        this.context.strokeStyle = slider.color;
-        this.context.arc(this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false);
-        this.context.lineWidth = this.fillWidth;
-        this.context.stroke();
-    };
+            this.context.fillStyle = '#eb879c';
+            this.context.fill();
 
-    // Draw tail arrow
-    Slider.prototype.drawArrow = function(slider) {
-        this.context.beginPath();
-        this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2);
-        this.context.lineTo(this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2);
-        this.context.lineTo(this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2);
-        this.context.fillStyle = "#eeeeee";
-        this.context.fill();
-    };
+            // Dot on the knob
+            this.context.beginPath();
+            this.context.strokeStyle = 'yellow';
+            this.context.arc(
+                Math.cos(slider.endAngle) * slider.radius + this.x0,
+                Math.sin(slider.endAngle) * slider.radius + this.y0,
+                this.scaleWidth / 10,
+                0, Math.PI * 2, false
+            );
+            this.context.lineWidth = 1;
+            this.context.fillStyle = 'yellow';
+            this.context.fill();
+        }
 
-    // Draw the knob (control element)
-    Slider.prototype.drawKnob = function(slider) {
-        // Knob
-        this.context.beginPath();
-        this.context.strokeStyle = '#eb879c';
-        this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
-            Math.sin(slider.endAngle)*slider.radius + this.y0,
-            this.knobWidth/2,
-            0,Math.PI*2,false);
-        this.context.lineWidth = 1;
+        // Calculate angles given the cursor position
+        calculateAngles(x, y) {
+            if (!this.selectedSlider) return;
 
-        this.context.fillStyle = '#eb879c';
-        this.context.fill();
+            let max = this.selectedSlider.max,
+                min = this.selectedSlider.min,
+                step = this.selectedSlider.step,
+                endAngle = Math.atan2(y - this.y0, x - this.x0),
+                ang_degrees = Slider.radToDeg(Slider.normalizeTan(endAngle)),
+                normalizedValue = Slider.normalizeTan(endAngle) * (max - min) / (2 * Math.PI) + min;
 
-        // Dot on the knob
-        this.context.beginPath();
-        this.context.strokeStyle = 'yellow';
-        this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
-            Math.sin(slider.endAngle)*slider.radius + this.y0,
-            this.scaleWidth/10,
-            0,Math.PI*2,false);
-        this.context.lineWidth = 1;
-        this.context.fillStyle = 'yellow';
-        this.context.fill();
-    };
+            normalizedValue = (normalizedValue / step >> 0) * step;
 
-    // Calculate angles given the cursor position
-    Slider.prototype.calculateAngles = function (x, y) {
-        if (!this.selectedSlider) { return; }
+            this.selectedSlider.endAngle = endAngle;
+            this.selectedSlider.ang_degrees = ang_degrees;
+            this.selectedSlider.normalizedValue = normalizedValue;
+        }
 
-        var max = this.selectedSlider.max,
-            min = this.selectedSlider.min,
-            step = this.selectedSlider.step,
-            endAngle = Math.atan2(y-this.y0, x-this.x0),
-            ang_degrees = this.radToDeg(this.normalizeTan(endAngle)),
-            normalizedValue = this.normalizeTan(endAngle) * (max - min) / (2 * Math.PI) + min;
+        // Helper method
+        static radToDeg(ang) {
+            return ang * 180 / Math.PI;
+        }
 
-        normalizedValue = (normalizedValue / step >> 0) * step;
+        // Normalizes tangent
+        static normalizeTan(ang) {
+            return ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : (2 * Math.PI + ang + Math.PI / 2);
+        }
 
-        this.selectedSlider.endAngle = endAngle;
-        this.selectedSlider.ang_degrees = ang_degrees;
-        this.selectedSlider.normalizedValue = normalizedValue;
-    };
+        // Calculates cursor coordinates
+        calculateUserCursor() {
+            const rect = this.container.getBoundingClientRect();
 
-    // Helper method
-    Slider.prototype.radToDeg = function (ang) {
-        return ang * 180 / Math.PI;
-    };
-
-    // Normalizes tangent
-    Slider.prototype.normalizeTan = function (ang) {
-        var rads = ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : (2 * Math.PI + ang + Math.PI / 2);
-        return rads;
-    };
-
-    // Calculates cursor coordinates
-    Slider.prototype.calculateUserCursor = function () {
-        var rect = this.container.getBoundingClientRect();
-
-        if (event.touches) {
-            this.MouseX = event.touches[0].clientX - rect.left;
-            this.MouseY = event.touches[0].clientY - rect.top;
+            if (event.touches) {
+                this.MouseX = event.touches[0].clientX - rect.left;
+                this.MouseY = event.touches[0].clientY - rect.top;
+            } else {
+                this.MouseX = event.clientX - rect.left;
+                this.MouseY = event.clientY - rect.top;
+            }
         }
-        else {
-            this.MouseX = event.clientX - rect.left;
-            this.MouseY = event.clientY - rect.top;
-        }
-    };
 
 
-    // Returns a slider band based on the cursor position
-    Slider.prototype.getSelectedSlider = function () {
-        this.calculateUserCursor();
-        var hip = Math.sqrt(Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2));
+        // Returns a slider band based on the cursor position
+        getSelectedSlider() {
+            this.calculateUserCursor();
+            const hip = Math.sqrt(Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2));
+            let selectedSlider;
 
-        for (var key in this.sliders) {
-            if (!this.sliders.hasOwnProperty(key)) continue;
-            var obj = this.sliders[key];
-            if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) {
-                var selectedSlider = obj;
-                break;
+            for (let key in this.sliders) {
+                if (!this.sliders.hasOwnProperty(key)) continue;
+                const obj = this.sliders[key];
+                if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) {
+                    selectedSlider = obj;
+                    break;
+                }
             }
+            return selectedSlider ? selectedSlider : null;
         }
-        return selectedSlider ? selectedSlider : null;
-    };
 
 
-    // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
-    Slider.prototype._handleMouseDown = function (event) {
-        event.preventDefault();
-        this.selectedSlider = this.getSelectedSlider();
+        // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
+        _handleMouseDown(event) {
+            event.preventDefault();
+            this.selectedSlider = this.getSelectedSlider();
+            if (!this.selectedSlider) return;
+            this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
+        }
 
-        if (!this.selectedSlider) return;
+        _handleMouseUp(event) {
+            event.preventDefault();
+            this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
+            this.currentSlider = this.selectedSlider;
+        }
 
-        this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
-    };
+        _handleClick(event) {
+            this.selectedSlider = this.getSelectedSlider();
+            if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) return;
+            if (this.selectedSlider) this._rotation();
+        }
 
-    Slider.prototype._handleMouseUp = function (event) {
-        event.preventDefault();
-        this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
-
-        this.currentSlider = this.selectedSlider;
-    };
-
-    Slider.prototype._handleClick = function (event) {
-        this.selectedSlider = this.getSelectedSlider();
-
-        if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
-            return;
+        _handleTouch(event) {
+            event.preventDefault();
+            this.selectedSlider = this.getSelectedSlider();
+            if (this.selectedSlider) this._rotation();
         }
-        if (this.selectedSlider) {
-            this._rotation();
-        }
-    };
 
-    Slider.prototype._handleTouch = function (event) {
-        event.preventDefault();
-        this.selectedSlider = this.getSelectedSlider();
-        if (this.selectedSlider) {
-            this._rotation();
+        _handleMove(event) {
+            event.preventDefault();
+            if (this.continuousMode) this._rotation();
+            else if (this.selectedSlider) this._rotation();
         }
-    };
 
-    Slider.prototype._handleMove = function (event) {
-        event.preventDefault();
-        if (this.continuousMode) {
-            this._rotation();
+        _handleEnd(event) {
+            event.preventDefault();
+            this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
         }
-        else {
-            if (this.selectedSlider) {
-                this._rotation();
-            }
-        }
-    };
 
-    Slider.prototype._handleEnd = function (event) {
-        event.preventDefault();
-        this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
-    };
-
-    // Rotation wrapper
-    Slider.prototype._rotation = function () {
-        this.calculateUserCursor();
-        if (this.continuousMode) {
-            this.selectedSlider = this.getSelectedSlider();
+        // Rotation wrapper
+        _rotation() {
+            this.calculateUserCursor();
+            if (this.continuousMode) this.selectedSlider = this.getSelectedSlider();
+            this.calculateAngles(this.MouseX, this.MouseY);
+            this.drawAll();
         }
+    }
 
-        this.calculateAngles(this.MouseX, this.MouseY);
-        this.drawAll();
-    };
 
@@ -293,0 +273,0 @@ if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')

src/slider-linear.js

 (function () {
-    function Slider(options) {
-        this.sliders = {};
-        this.scaleWidth = 35;
-        this.fillWidth = 35;
-        this.knobWidth = 35;
+    class Slider {
+        constructor(options) {
+            this.sliders = {};
+            this.scaleWidth = 35;
+            this.fillWidth = 35;
+            this.knobWidth = 35;
 
-        this.continuousMode = options.continuousMode || false;
-        this.vertical = options.vertical || false;
+            this.continuousMode = options.continuousMode || false;
+            this.vertical = options.vertical || false;
 
-        this.container = document.getElementById(options.canvasId);
-        this.the_body = document.body;
-        this.context = this.container.getContext('2d');
+            this.container = document.getElementById(options.canvasId);
+            this.the_body = document.body;
+            this.context = this.container.getContext('2d');
 
-        this.MouseX = 0;
-        this.MouseY = 0;
+            this.MouseX = 0;
+            this.MouseY = 0;
 
-        this.selectedSlider = null;
-        this.currentSlider = null;
+            this.selectedSlider = null;
+            this.currentSlider = null;
 
-        this.rotationEventListener = this._rotation.bind(this);
-        this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
-        this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
-        this.container.addEventListener('click', this._handleClick.bind(this), false);
+            this.rotationEventListener = this._rotation.bind(this);
+            this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
+            this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
+            this.container.addEventListener('click', this._handleClick.bind(this), false);
 
 
-        this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
-        this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
-        this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
+            this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
+            this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
+            this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
+        }
 
-    }
+        // Adds a slider band to the slider
+        addSlider(options) {
+            this.sliders[options.id] = {
+                id: options.id,
+                container: document.getElementById(options.container),
+                color: options.color || '#104b63',
+                width: options.width || 100,
+                min: options.min || 0,
+                max: options.max || 100,
+                step: options.step || 1,
+                x0: options.x0 || 0,
+                y0: options.y0 || 0,
+                onValueChangeCallback: options.changed || function (v) {},
+                value: 0,
+                normalizedValue: options.min || 0
+            };
 
+            const obj = this.sliders[options.id];
+            this.setSliderValue(obj.id, options.min);
+        }
 
-    // Adds a slider band to the slider
-    Slider.prototype.addSlider = function (options) {
-        this.sliders[options.id] = {
-            id: options.id,
-            container: document.getElementById(options.container),
-            color: options.color || '#104b63',
-            width: options.width || 100,
-            min: options.min || 0,
-            max: options.max || 100,
-            step: options.step || 1,
-            x0: options.x0 || 0,
-            y0: options.y0 || 0,
-            onValueChangeCallback: options.changed || function(v) {},
-            value: 0,
-            normalizedValue: options.min || 0
-        };
-
-        var obj = this.sliders[options.id];
-
-        this.setSliderValue(obj.id, options.min);
-    };
-
-    // Sets (draws) slider band value given the band id and value
-    Slider.prototype.setSliderValue = function (id, value) {
-        var slider = this.sliders[id];
-        if (value <= slider.min) {
-            slider.value = 0;
-            slider.normalizedValue = slider.min;
+        // Sets (draws) slider band value given the band id and value
+        setSliderValue(id, value) {
+            const slider = this.sliders[id];
+            if (value <= slider.min) {
+                slider.value = 0;
+                slider.normalizedValue = slider.min;
+            } else if (value >= slider.max) {
+                slider.value = slider.width;
+                slider.normalizedValue = slider.max;
+            } else {
+                slider.value = slider.width * (value - slider.min) / (slider.max - slider.min);
+                slider.normalizedValue = value;
+            }
+            this.drawAll();
         }
-        else if (value >= slider.max) {
-            slider.value = slider.width;
-            slider.normalizedValue = slider.max;
-        }
-        else {
-            slider.value = slider.width*(value-slider.min)/(slider.max-slider.min);
-            slider.normalizedValue = value;
-        }
-        this.drawAll();
-    };
 
-    // Redraws everything
-    Slider.prototype.drawAll = function () {
-        this.context.clearRect(0, 0, this.container.width, this.container.height);
-        for (var key in this.sliders) {
-            if (!this.sliders.hasOwnProperty(key)) continue;
-            var obj = this.sliders[key];
-            this.drawScale(obj);
-            this.drawData(obj);
-            this.drawKnob(obj);
-            obj.onValueChangeCallback({'width': obj.value, 'value': obj.normalizedValue});
+        // Redraws everything
+        drawAll() {
+            this.context.clearRect(0, 0, this.container.width, this.container.height);
+            for (let key in this.sliders) {
+                if (!this.sliders.hasOwnProperty(key)) continue;
+                const obj = this.sliders[key];
+                this.drawScale(obj);
+                this.drawData(obj);
+                this.drawKnob(obj);
+                obj.onValueChangeCallback({'width': obj.value, 'value': obj.normalizedValue});
+            }
         }
-    };
 
-    // Draw the scale for a selected slider band
-    Slider.prototype.drawScale = function(slider) {
-        var fix_x = this.vertical?0:1;
-        var fix_y = this.vertical?1:0;
+        // Draw the scale for a selected slider band
+        drawScale(slider) {
+            let fix_x = this.vertical ? 0 : 1;
+            let fix_y = this.vertical ? 1 : 0;
 
-        // first rounded edge
-        this.context.beginPath();
-        this.context.strokeStyle = slider.color;
-        this.context.arc(slider.x0 + fix_x, slider.y0 - fix_y, this.scaleWidth/2, 0, Math.PI*2, false);
-        this.context.lineWidth = 1;
-        this.context.fillStyle = slider.color;
-        this.context.fill();
+            // first rounded edge
+            this.context.beginPath();
+            this.context.strokeStyle = slider.color;
+            this.context.arc(slider.x0 + fix_x, slider.y0 - fix_y, this.scaleWidth/2, 0, Math.PI*2, false);
+            this.context.lineWidth = 1;
+            this.context.fillStyle = slider.color;
+            this.context.fill();
 
-        var x1, y1;
-        if (this.vertical) {
-            x1 = slider.x0;
-            y1 = slider.y0 - slider.width;
-        }
-        else {
-            x1 = slider.x0 + slider.width;
-            y1 = slider.y0;
-        }
-        // Scale
-        this.context.beginPath();
-        this.context.strokeStyle = '#eeeeee';
-        this.context.moveTo(slider.x0, slider.y0);
-        this.context.lineTo(x1, y1);
-        this.context.lineWidth = this.scaleWidth;
-        this.context.stroke();
+            let x1, y1;
+            if (this.vertical) {
+                x1 = slider.x0;
+                y1 = slider.y0 - slider.width;
+            }
+            else {
+                x1 = slider.x0 + slider.width;
+                y1 = slider.y0;
+            }
+            // Scale
+            this.context.beginPath();
+            this.context.strokeStyle = '#eeeeee';
+            this.context.moveTo(slider.x0, slider.y0);
+            this.context.lineTo(x1, y1);
+            this.context.lineWidth = this.scaleWidth;
+            this.context.stroke();
 
 
-        // second rounded edge
-        this.context.strokeStyle = '#eeeeee';
-        this.context.arc(x1, y1, this.scaleWidth/2, 0, Math.PI*2, false);
-        this.context.lineWidth = 1;
-        this.context.fillStyle = '#eeeeee';
-        this.context.fill();
-    };
-
-    // Draw the data on the selected slider band
-    Slider.prototype.drawData = function(slider) {
-        var x1, y1;
-        if (this.vertical) {
-            x1 = slider.x0;
-            y1 = slider.y0 - slider.value;
+            // second rounded edge
+            this.context.strokeStyle = '#eeeeee';
+            this.context.arc(x1, y1, this.scaleWidth/2, 0, Math.PI*2, false);
+            this.context.lineWidth = 1;
+            this.context.fillStyle = '#eeeeee';
+            this.context.fill();
         }
-        else {
-            x1 = slider.x0 + slider.value;
-            y1 = slider.y0;
-        }
 
-        this.context.beginPath();
-        this.context.strokeStyle = slider.color;
-        this.context.moveTo(slider.x0, slider.y0);
-        this.context.lineTo(x1, y1);
-        this.context.lineWidth = this.fillWidth;
-        this.context.stroke();
-    };
+        // Draw the data on the selected slider band
+        drawData(slider) {
+            let x1, y1;
+            if (this.vertical) {
+                x1 = slider.x0;
+                y1 = slider.y0 - slider.value;
+            }
+            else {
+                x1 = slider.x0 + slider.value;
+                y1 = slider.y0;
+            }
 
-    // Draw the knob (control element)
-    Slider.prototype.drawKnob = function(slider) {
-        // Knob
-        var x1, y1;
-        if (this.vertical) {
-            x1 = slider.x0;
-            y1 = slider.y0 - slider.value;
+            this.context.beginPath();
+            this.context.strokeStyle = slider.color;
+            this.context.moveTo(slider.x0, slider.y0);
+            this.context.lineTo(x1, y1);
+            this.context.lineWidth = this.fillWidth;
+            this.context.stroke();
         }
-        else {
-            x1 = slider.x0 + slider.value;
-            y1 = slider.y0;
-        }
 
-        this.context.beginPath();
-        this.context.strokeStyle = '#eb879c';
-        this.context.arc(x1,
-            y1,
-            this.knobWidth/2,
-            0,Math.PI*2,false);
-        this.context.lineWidth = 1;
+        // Draw the knob (control element)
+        drawKnob(slider) {
+            // Knob
+            let x1, y1;
+            if (this.vertical) {
+                x1 = slider.x0;
+                y1 = slider.y0 - slider.value;
+            }
+            else {
+                x1 = slider.x0 + slider.value;
+                y1 = slider.y0;
+            }
 
-        this.context.fillStyle = '#eb879c';
-        this.context.fill();
+            this.context.beginPath();
+            this.context.strokeStyle = '#eb879c';
+            this.context.arc(
+                x1,
+                y1,
+                this.knobWidth / 2,
+                0, Math.PI * 2, false
+            );
+            this.context.lineWidth = 1;
 
-        // Dot on the knob
-        this.context.beginPath();
-        this.context.strokeStyle = 'yellow';
-        this.context.arc(x1,
-            y1,
-            this.scaleWidth/10,
-            0,Math.PI*2,false);
-        this.context.lineWidth = 1;
-        this.context.fillStyle = 'yellow';
-        this.context.fill();
-    };
+            this.context.fillStyle = '#eb879c';
+            this.context.fill();
 
-    // Calculate angles given the cursor position
-    Slider.prototype.calculateValues = function (x, y) {
-        if (!this.selectedSlider) {
-            return;
+            // Dot on the knob
+            this.context.beginPath();
+            this.context.strokeStyle = 'yellow';
+            this.context.arc(
+                x1,
+                y1,
+                this.scaleWidth / 10,
+                0, Math.PI * 2, false
+            );
+            this.context.lineWidth = 1;
+            this.context.fillStyle = 'yellow';
+            this.context.fill();
         }
 
-        var max = this.selectedSlider.max,
-            min = this.selectedSlider.min,
-            step = this.selectedSlider.step,
-            w = this.selectedSlider.width;
+        // Calculate angles given the cursor position
+        calculateValues(x, y) {
+            if (!this.selectedSlider) return;
 
-        var x1;
-        if (this.vertical) {
-            x1 = this.selectedSlider.y0 - y;
-        }
-        else {
-            x1 = x - this.selectedSlider.x0;
-        }
+            let max = this.selectedSlider.max,
+                min = this.selectedSlider.min,
+                step = this.selectedSlider.step,
+                w = this.selectedSlider.width;
 
+            let x1;
+            x1 = this.vertical ? this.selectedSlider.y0 - y : x - this.selectedSlider.x0;
 
-        var val = x1;
-        if (val > this.selectedSlider.width - this.selectedSlider.step) {
-            val = this.selectedSlider.width;
-        }
-        if (val < 0 + this.selectedSlider.step) {
-            val = 0;
-        }
 
-        var nomval = (val*(max-min))/(w) + min;
-        nomval = (nomval/step >> 0) * step;
+            let val = x1;
+            if (val > this.selectedSlider.width - this.selectedSlider.step) val = this.selectedSlider.width;
+            if (val < 0 + this.selectedSlider.step) val = 0;
 
-        //val = (nomval - min) * w / (max - min);
-
-        this.selectedSlider.value = val;
-        this.selectedSlider.normalizedValue = nomval;
-    };
-
-    // Calculates cursor coordinates
-    Slider.prototype.calculateUserCursor = function () {
-        var rect = this.container.getBoundingClientRect();
-
-        if (event.touches) {
-            this.MouseX = event.touches[0].clientX - rect.left;
-            this.MouseY = event.touches[0].clientY - rect.top;
+            let nomval = (val * (max - min)) / (w) + min;
+            nomval = (nomval / step >> 0) * step;
+            this.selectedSlider.value = val;
+            this.selectedSlider.normalizedValue = nomval;
         }
-        else {
-            this.MouseX = event.clientX - rect.left;
-            this.MouseY = event.clientY - rect.top;
-        }
-    };
 
+        // Calculates cursor coordinates
+        calculateUserCursor() {
+            let rect = this.container.getBoundingClientRect();
 
-    // Returns a slider band based on the cursor position
-    Slider.prototype.getSelectedSlider = function () {
-        this.calculateUserCursor();
-
-        for (var key in this.sliders) {
-            if (!this.sliders.hasOwnProperty(key)) continue;
-            var obj = this.sliders[key];
-            var xx;
-            var yy;
-            if (this.vertical) {
-                xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + this.scaleWidth / 2;
-                yy = this.MouseY >= obj.y0 - obj.width - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
+            if (event.touches) {
+                this.MouseX = event.touches[0].clientX - rect.left;
+                this.MouseY = event.touches[0].clientY - rect.top;
+            } else {
+                this.MouseX = event.clientX - rect.left;
+                this.MouseY = event.clientY - rect.top;
             }
-            else {
-                xx = this.MouseX >= obj.x0 - this.scaleWidth/2 && this.MouseX <= obj.x0 + obj.width + this.scaleWidth/2;
-                yy = this.MouseY >= obj.y0 - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
-            }
-
-            if (xx && yy) {
-                var selectedSlider = obj;
-                break;
-            }
         }
 
-        return selectedSlider ? selectedSlider : null;
-    };
 
+        // Returns a slider band based on the cursor position
+        getSelectedSlider() {
+            this.calculateUserCursor();
+            let selectedSlider;
 
-    // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
-    Slider.prototype._handleMouseDown = function (event) {
-        event.preventDefault();
-        this.selectedSlider = this.getSelectedSlider();
+            for (let key in this.sliders) {
+                if (!this.sliders.hasOwnProperty(key)) continue;
+                let obj = this.sliders[key];
+                let xx;
+                let yy;
+                if (this.vertical) {
+                    xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + this.scaleWidth / 2;
+                    yy = this.MouseY >= obj.y0 - obj.width - this.scaleWidth / 2 && this.MouseY <= obj.y0 + this.scaleWidth / 2;
+                } else {
+                    xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + obj.width + this.scaleWidth / 2;
+                    yy = this.MouseY >= obj.y0 - this.scaleWidth / 2 && this.MouseY <= obj.y0 + this.scaleWidth / 2;
+                }
 
-        if (!this.selectedSlider) return;
+                if (xx && yy) {
+                    selectedSlider = obj;
+                    break;
+                }
+            }
 
-        this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
-    };
+            return selectedSlider ? selectedSlider : null;
+        }
 
-    Slider.prototype._handleMouseUp = function (event) {
-        event.preventDefault();
-        this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
 
-        this.currentSlider = this.selectedSlider;
-    };
+        // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
+        _handleMouseDown(event) {
+            event.preventDefault();
+            this.selectedSlider = this.getSelectedSlider();
+            if (!this.selectedSlider) return;
+            this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
+        }
 
-    Slider.prototype._handleClick = function (event) {
-        this.selectedSlider = this.getSelectedSlider();
+        _handleMouseUp(event) {
+            event.preventDefault();
+            this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
+            this.currentSlider = this.selectedSlider;
+        }
 
+        _handleClick(event) {
+            this.selectedSlider = this.getSelectedSlider();
+            if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) return;
+            if (this.selectedSlider) this._rotation();
+        }
 
-        if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
-            return;
+        _handleTouch(event) {
+            event.preventDefault();
+            this.selectedSlider = this.getSelectedSlider();
+            if (this.selectedSlider) this._rotation();
         }
 
-        if (this.selectedSlider) {
-            this._rotation();
+        _handleMove(event) {
+            event.preventDefault();
+            if (this.continuousMode) this._rotation();
+            else if (this.selectedSlider) this._rotation();
         }
-    };
 
-    Slider.prototype._handleTouch = function (event) {
-        event.preventDefault();
-        this.selectedSlider = this.getSelectedSlider();
-        if (this.selectedSlider) {
-            this._rotation();
+        _handleEnd(event) {
+            event.preventDefault();
+            this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
         }
-    };
 
-    Slider.prototype._handleMove = function (event) {
-        event.preventDefault();
-        if (this.continuousMode) {
-            this._rotation();
-        } else {
-            if (this.selectedSlider) {
-                this._rotation();
-            }
+        // Rotation wrapper
+        _rotation() {
+            this.calculateUserCursor();
+            if (this.continuousMode) this.selectedSlider = this.getSelectedSlider();
+            this.calculateValues(this.MouseX, this.MouseY);
+            this.drawAll();
         }
+    }
 
-    };
 
-    Slider.prototype._handleEnd = function (event) {
-        event.preventDefault();
-        this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
-    };
-
-    // Rotation wrapper
-    Slider.prototype._rotation = function () {
-        this.calculateUserCursor();
-        if (this.continuousMode) {
-            this.selectedSlider = this.getSelectedSlider();
-        }
-        this.calculateValues(this.MouseX, this.MouseY);
-        this.drawAll();
-    };
-
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
@@ -328,0 +295,0 @@ module.exports = Slider;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

44614

decreased by-0.75%

Lines of code

639

decreased by-5.19%

No dependency changes