js-rangeslider - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/js-rangeslider.js

@@ -1,1 +0,1 @@
-!function(){var t={300:function(t){t.exports=class{#t;#e;#s;#i;#n;#a;#u;constructor(t,e){this.#t=t,this.#u=Object.assign({min:this.#t.dataset.min||0,max:this.#t.dataset.max||100,minInputName:"min",maxInputName:"max",minInputValue:this.#t.dataset.vmin||0,maxInputValue:this.#t.dataset.vmax||100,step:this.#t.dataset.step||1,outputFormatter:t=>`${t} &euro;`,progress:!0,output:!0},e);const s=this.#m("div");if(s.className="slider",this.#u.progress&&(this.#a=this.#m("div"),this.#a.className="progress",s.appendChild(this.#a)),this.#i=this.#m("input",{type:"range",min:this.#u.min,max:this.#u.max,name:this.#u.minInputName,value:this.#u.minInputValue,step:this.#u.step}),s.appendChild(this.#i),this.#e=this.#m("input",{type:"range",min:this.#u.min,max:this.#u.max,name:this.#u.maxInputName,value:this.#u.maxInputValue,step:this.#u.step}),s.appendChild(this.#e),this.#t.appendChild(s),this.#u.output){const t=this.#m("div");t.className="output",this.#n=this.#m("span"),t.appendChild(this.#n),this.#s=this.#m("span"),t.appendChild(this.#s),this.#t.appendChild(t)}this.min=this.#u.minInputValue,this.max=this.#u.maxInputValue,this.#r()}get min(){return 1*this.#i.value}get max(){return 1*this.#e.value}set min(t){this.#i.value=t<=this.max?t:this.max,this.#u.output&&(this.#n.innerHTML=`${this.#u.outputFormatter(this.min)}`);const e=(this.min-this.#u.min)/(this.#u.max-this.#u.min),s=100*e,i=this.#t.querySelector(".slider").clientHeight;this.#u.progress&&(this.#a.style.left=`calc( ${s}% - ${e} * ${i}px )`)}set max(t){this.#e.value=t>=this.min?t:this.min,this.#u.output&&(this.#s.innerHTML=`${this.#u.outputFormatter(this.max)}`);const e=1-(this.max-this.#u.min)/(this.#u.max-this.#u.min),s=100*e,i=this.#t.querySelector(".slider").clientHeight;this.#u.progress&&(this.#a.style.right=`calc( ${s}% - ${e} * ${i}px )`)}#m(t,e){const s=document.createElement(t);for(const t in e)s.setAttribute(t,e[t]);return s}#r(){this.#t.addEventListener("input",(t=>{t.target===this.#i&&(this.min=t.target.value),t.target===this.#e&&(this.max=t.target.value)}))}}}},e={};function s(i){var n=e[i];if(void 0!==n)return n.exports;var a=e[i]={exports:{}};return t[i](a,a.exports,s),a.exports}s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,{a:e}),e},s.d=function(t,e){for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},function(){"use strict";var t=s(300),e=s.n(t);document.querySelectorAll(".default").forEach((t=>{new(e())(t)})),document.querySelectorAll(".step-25").forEach((t=>{new(e())(t,{outputFormatter:t=>`${t.toFixed(2)} kg`})})),document.querySelectorAll(".step-lg").forEach((t=>{new(e())(t,{outputFormatter:t=>t/1e3+" k"})}))}()}();
+!function(){var t={300:function(t){t.exports=class{#t;#e;#s;#n;#i;#u;#a;constructor(t,e){this.#t=t,this.#a=Object.assign({min:this.#t.dataset.min||0,max:this.#t.dataset.max||100,minInputName:"min",maxInputName:"max",minInputValue:this.#t.dataset.vmin||0,maxInputValue:this.#t.dataset.vmax||100,step:this.#t.dataset.step||1,outputFormatter:t=>`${t} &euro;`,progress:!0,output:!0},e);const s=this.#m("div");if(s.className="slider",this.#a.progress&&(this.#u=this.#m("div"),this.#u.className="progress",s.appendChild(this.#u)),this.#n=this.#m("input",{type:"range",min:this.#a.min,max:this.#a.max,name:this.#a.minInputName,value:this.#a.minInputValue,step:this.#a.step}),s.appendChild(this.#n),this.#e=this.#m("input",{type:"range",min:this.#a.min,max:this.#a.max,name:this.#a.maxInputName,value:this.#a.maxInputValue,step:this.#a.step}),s.appendChild(this.#e),this.#t.appendChild(s),this.#a.output){const t=this.#m("div");t.className="output",this.#i=this.#m("span"),t.appendChild(this.#i),this.#s=this.#m("span"),t.appendChild(this.#s),this.#t.appendChild(t)}this.min=this.#a.minInputValue,this.max=this.#a.maxInputValue,this.#r()}get min(){return 1*this.#n.value}get max(){return 1*this.#e.value}set min(t){this.#n.value=t<=this.max?t:this.max,this.#a.output&&(this.#i.innerHTML=`${this.#a.outputFormatter(this.min)}`);const e=(this.min-this.#a.min)/(this.#a.max-this.#a.min),s=100*e,n=this.#t.querySelector(".slider").clientHeight;this.#a.progress&&(this.#u.style.left=`calc( ${s}% - ${e} * ${n}px )`)}set max(t){this.#e.value=t>=this.min?t:this.min,this.#a.output&&(this.#s.innerHTML=`${this.#a.outputFormatter(this.max)}`);const e=1-(this.max-this.#a.min)/(this.#a.max-this.#a.min),s=100*e,n=this.#t.querySelector(".slider").clientHeight;this.#a.progress&&(this.#u.style.right=`calc( ${s}% - ${e} * ${n}px )`)}#m(t,e){const s=document.createElement(t);for(const t in e)s.setAttribute(t,e[t]);return s}#r(){this.#t.addEventListener("input",(t=>{t.target===this.#n&&(this.min=t.target.value),t.target===this.#e&&(this.max=t.target.value)}))}}}},e={};function s(n){var i=e[n];if(void 0!==i)return i.exports;var u=e[n]={exports:{}};return t[n](u,u.exports,s),u.exports}s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,{a:e}),e},s.d=function(t,e){for(var n in e)s.o(e,n)&&!s.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},function(){"use strict";var t=s(300),e=s.n(t);document.querySelectorAll(".default").forEach((t=>{new(e())(t)})),document.querySelectorAll(".step-25").forEach((t=>{new(e())(t,{outputFormatter:t=>`${t.toFixed(2)} kg`})})),document.querySelectorAll(".step-lg").forEach((t=>{new(e())(t,{outputFormatter:t=>t/1e3+" k"})})),document.querySelectorAll(".no-output").forEach((t=>{const s=new(e())(t,{output:!1}),n=document.createElement("button");n.textContent="Alert slider values",n.onclick=()=>alert(`Your values are: ${s.min} and ${s.max}`),t.after(n)}))}()}();

examples/index.js

@@ -14,3 +14,3 @@ /**
 document.querySelectorAll(".step-25").forEach(el => {
-    new RangeSlider(el,{
+    new RangeSlider(el, {
         outputFormatter: o => `${o.toFixed(2)} kg`
@@ -21,5 +21,18 @@ })
 document.querySelectorAll(".step-lg").forEach(el => {
-    new RangeSlider(el,{
-        outputFormatter: o => `${o/1000} k`
+    new RangeSlider(el, {
+        outputFormatter: o => `${o / 1000} k`
     })
 })
+
+document.querySelectorAll(".no-output").forEach(el => {
+    const slider = new RangeSlider(el, {
+        output: false
+    })
+
+    const button = document.createElement("button")
+    button.textContent = "Alert slider values"
+    button.onclick = () => alert(`Your values are: ${slider.min} and ${slider.max}`)
+
+    el.after(button)
+})
+

package.json

 {
   "name": "js-rangeslider",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A vanilla js range Slider utility handling dual inputs",
@@ -15,6 +15,9 @@ "scripts": {
     "range",
+    "slider",
     "input",
-    "slider",
     "dual",
-    "front-end"
+    "front-end",
+    "pricerange",
+    "min",
+    "max"
   ],
@@ -21,0 +24,0 @@ "browserslist": [

No alert changes

Improved metrics

Total package byte prevSize

19824

8.89%

Lines of code

163

5.84%

No dependency changes