preact-range-slider - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

es2015/components/MultiSlider.js

@@ -219,3 +219,4 @@ import { h } from 'preact';
             const pointsObject = Object.assign({}, marks);
-            if (step != null) {
+            if ((step != null)
+                && (step > 0)) {
                 for (let point = min; point <= max; point += step) {
@@ -222,0 +223,0 @@ pointsObject[point] = String(point);

es2015/components/Steps.js

@@ -24,3 +24,3 @@ import classJoin from 'classjoin';
     const points = Object.keys(marks).map(Number);
-    if (dots) {
+    if (dots && (step > 0)) {
         for (let i = min; i <= max; i = i + step) {
@@ -27,0 +27,0 @@ if (points.indexOf(i) === -1) {

es2015/utils.js

@@ -27,3 +27,4 @@ function noop(..._rest) {
     const points = Object.keys(marks).map(Number);
-    if (step != null) {
+    if ((step != null)
+        && (step > 0)) {
         const closestStep = Math.round((value - min) / step) * step + min;
@@ -39,3 +40,4 @@ points.push(closestStep);
     const closestPoint = getClosestPoint(value, props);
-    return ((step == null)
+    return (((step == null)
+        || (step < 1))
         ? closestPoint
@@ -42,0 +44,0 @@ : Number(closestPoint.toFixed(getPrecision(step))));

es5-esm/components/MultiSlider.js

@@ -227,3 +227,4 @@ import * as tslib_1 from "tslib";
             var pointsObject = tslib_1.__assign({}, marks);
-            if (step != null) {
+            if ((step != null)
+                && (step > 0)) {
                 for (var point = min; point <= max; point += step) {
@@ -230,0 +231,0 @@ pointsObject[point] = String(point);

es5-esm/components/Steps.js

@@ -26,3 +26,3 @@ import classJoin from 'classjoin';
     var points = Object.keys(marks).map(Number);
-    if (dots) {
+    if (dots && (step > 0)) {
         for (var i = min; i <= max; i = i + step) {
@@ -29,0 +29,0 @@ if (points.indexOf(i) === -1) {

es5-esm/utils.js

@@ -34,3 +34,4 @@ function noop() {
     var points = Object.keys(marks).map(Number);
-    if (step != null) {
+    if ((step != null)
+        && (step > 0)) {
         var closestStep = Math.round((value - min) / step) * step + min;
@@ -46,3 +47,4 @@ points.push(closestStep);
     var closestPoint = getClosestPoint(value, props);
-    return ((step == null)
+    return (((step == null)
+        || (step < 1))
         ? closestPoint
@@ -49,0 +51,0 @@ : Number(closestPoint.toFixed(getPrecision(step))));

es5/index.js

@@ -74,3 +74,4 @@ (function (global, factory) {
     var points = Object.keys(marks).map(Number);
-    if (step != null) {
+    if ((step != null)
+        && (step > 0)) {
         var closestStep = Math.round((value - min) / step) * step + min;
@@ -86,3 +87,4 @@ points.push(closestStep);
     var closestPoint = getClosestPoint(value, props);
-    return ((step == null)
+    return (((step == null)
+        || (step < 1))
         ? closestPoint
@@ -126,3 +128,3 @@ : Number(closestPoint.toFixed(getPrecision(step))));
     if (withoutConditions) {
-        classes = classes.concat(withoutConditions);
+        classes = withoutConditions.concat(classes);
     }
@@ -190,3 +192,3 @@ return classes.join(' ');
     var points = Object.keys(marks).map(Number);
-    if (dots) {
+    if (dots && (step > 0)) {
         for (var i = min; i <= max; i = i + step) {
@@ -738,3 +740,4 @@ if (points.indexOf(i) === -1) {
             var pointsObject = __assign({}, marks);
-            if (step != null) {
+            if ((step != null)
+                && (step > 0)) {
                 for (var point = min; point <= max; point += step) {
@@ -741,0 +744,0 @@ pointsObject[point] = String(point);

es5/preact-range-slider.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],t):t(e.PreactRangeSlider=e.PreactRangeSlider||{},e.preact)}(this,function(e,t){"use strict";function n(e,t){function n(){this.constructor=e}b(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function r(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t]}function o(e,t){var n=t.min,r=t.max;return e<=n?n:e>=r?r:e}function a(e,t){var n=t.min,r=t.max;return e<n||e>r}function i(e){var t=e.toString(),n=t.indexOf("."),r=0;return-1!==n&&(r=t.length-n-1),r}function s(e,t){var n=t.marks,r=t.step,o=t.min,a=Object.keys(n).map(Number);if(null!=r){var i=Math.round((e-o)/r)*r+o;a.push(i)}var s=a.map(function(t){return Math.abs(e-t)});return a[s.indexOf(Math.min.apply(Math,s))]||o}function u(e,t){var n=t.step,r=s(e,t);return null==n?r:Number(r.toFixed(i(n)))}function l(e,t){var n=t.getBoundingClientRect();return e?n.top+n.height/2:n.left+n.width/2}function c(e,t){return e?t.clientY:t.pageX}function d(e,t){return e?t.touches[0].clientY:t.touches[0].pageX}function p(e,t){return t.some(function(t){return e.target===t})}function h(e){return e.touches.length>1||"touchend"===e.type.toLowerCase()&&e.touches.length>0}function f(e){e.stopPropagation(),e.preventDefault()}function v(e,t){for(var n=[],r=Object.keys(e),o=0,a=r.length;o<a;o++){var i=r[o];e[i]&&n.push(i)}return t&&(n=n.concat(t)),n.join(" ")}function m(e){var n=e.min,r=e.max,o=e.lowerBound,a=e.upperBound,i=e.marks,s=e.included,u=e.vertical,l=e.classesPrefix,c=Object.keys(i),d=.9*(100/(c.length-1)),p=r-n,h=c.map(Number).sort(function(e,t){return e-t}).map(function(e){var r=!s&&e===a||s&&e<=a&&e>=o,c=v((m={},m[l+"active"]=r,m),[l+"text"]),h=u?{marginBottom:"-50%",bottom:(e-n)/p*100+"%"}:{width:d+"%",marginLeft:-d/2+"%",left:(e-n)/p*100+"%"},f=i[e];return t.h("span",{class:c,style:h,key:String(e)},f);var m});return t.h("div",{class:l+"marks"},h)}function g(e){var n=e.min,r=e.max,o=e.step,a=e.lowerBound,i=e.upperBound,s=e.marks,u=e.dots,l=e.included,c=e.vertical,d=e.classesPrefix,p=r-n,h=y(s,u,o,n,r).map(function(e){var r=Math.abs(e-n)/p*100+"%",o=c?{bottom:r}:{left:r},s=!l&&e===i||l&&e<=i&&e>=a,u=v((h={},h[d+"active"]=s,h),[d+"dot"]);return t.h("span",{class:u,style:o,key:String(e)});var h});return t.h("div",{class:d+"steps"},h)}function y(e,t,n,r,o){var a=Object.keys(e).map(Number);if(t)for(var i=r;i<=o;i+=n)-1===a.indexOf(i)&&a.push(i);return a}var b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},x=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},S=function(e){function o(){var t=null!==e&&e.apply(this,arguments)||this;return t.dragOffset=0,t.handlesRefs=[],t.saveSlider=function(e){t.sliderRef=e},t.saveHandle=function(e,n){void 0===n&&(n=0),null==e?delete t.handlesRefs[n]:t.handlesRefs[n]=e.base},t.onMouseDown=function(e){if(0===e.button){var n=t.props.vertical,r=c(n,e);if(p(e,t.handlesRefs)){var o=l(n,e.target);t.dragOffset=r-o,r=o}else t.dragOffset=0;t.onStart(r),t.addDocumentMouseEvents(),f(e)}},t.onTouchStart=function(e){if(!h(e)){var n=t.props.vertical,r=d(n,e);if(p(e,t.handlesRefs)){var o=l(n,e.target);t.dragOffset=r-o,r=o}else t.dragOffset=0;t.onStart(r),t.addDocumentTouchEvents(),f(e)}},t.onMouseMove=function(e){if(t.sliderRef){var n=c(t.props.vertical,e);t.onMove(n-t.dragOffset),f(e)}else t.onEnd()},t.onTouchMove=function(e){if(t.sliderRef&&!h(e)){var n=d(t.props.vertical,e);t.onMove(n-t.dragOffset),f(e)}else t.onEnd()},t.onEventEnd=function(){t.removeDocumentEvents(),t.onEnd(),t.props.onAfterChange(t.getValue())},t}return n(o,e),o.prototype.componentWillUnmount=function(){this.removeDocumentEvents()},o.prototype.renderBase=function(e,n){var o=this.props,a=o.min,i=o.max,s=o.step,u=o.marks,l=o.dots,c=o.included,d=o.vertical,p=o.disabled,h=o.className,f=o.classesPrefix,y=o.children,b=this.getLowerBound(),x=this.getUpperBound(),S=v((P={},P[f+"with-marks"]=Object.keys(u).length,P[f+"vertical"]=d,P[f+"disabled"]=p,P),[h]);return t.h("div",{class:S,ref:this.saveSlider,onTouchStart:p?r:this.onTouchStart,onMouseDown:p?r:this.onMouseDown},t.h("div",{class:f+"rail"}),e,t.h(g,{vertical:d,marks:u,dots:l,step:s,included:c,lowerBound:b,upperBound:x,max:i,min:a,classesPrefix:f}),n,t.h(m,{vertical:d,marks:u,included:c,lowerBound:b,upperBound:x,max:i,min:a,classesPrefix:f}),y);var P},o.prototype.getSliderStart=function(){var e=this.sliderRef;if(!e)return 0;var t=e.getBoundingClientRect();return this.props.vertical?t.top:t.left},o.prototype.getSliderLength=function(){var e=this.sliderRef;return e?this.props.vertical?e.clientHeight:e.clientWidth:0},o.prototype.calcValue=function(e){var t=this.props,n=t.vertical,r=t.min,o=t.max,a=Math.abs(Math.max(e,0)/this.getSliderLength());return n?(1-a)*(o-r)+r:a*(o-r)+r},o.prototype.calcValueByPos=function(e){var t=e-this.getSliderStart();return this.clampAlignValue(this.calcValue(t))},o.prototype.calcOffset=function(e){var t=this.props,n=t.min;return 100*((e-n)/(t.max-n))},o.prototype.addDocumentMouseEvents=function(){document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onEventEnd)},o.prototype.addDocumentTouchEvents=function(){document.addEventListener("touchmove",this.onTouchMove),document.addEventListener("touchend",this.onEventEnd)},o.prototype.removeDocumentEvents=function(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onEventEnd),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onEventEnd)},o}(t.Component);S.defaultProps={min:0,max:100,step:1,marks:{},dots:!1,included:!0,vertical:!1,disabled:!1,className:"range-slider",classesPrefix:"",onBeforeChange:r,onChange:r,onAfterChange:r,tipFormatter:String};var P=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.saveElement=function(e){t.elementRef=e},t}return n(r,e),r.prototype.render=function(e){var n=e.min,r=e.max,o=e.value,a=e.vertical,i=e.disabled,s=e.dragging,u=e.index,l=e.offset,c=e.classesPrefix,d=e.children,p=a?{bottom:l+"%"}:{left:l+"%"};s&&this.elementRef&&this.elementRef.focus();var h=v((f={},f[c+"dragging"]=s,f),[c+"handle",c+"handle-"+u]);return t.h("div",{class:h,style:p,role:"slider",tabIndex:i?void 0:0,"aria-orientation":a?"vertical":"horizontal","aria-disabled":String(i),"aria-valuemin":n,"aria-valuemax":r,"aria-valuenow":o,ref:this.saveElement},t.h("span",{class:c+"tip"},d));var f},r}(t.Component),B=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return n(r,e),r.prototype.render=function(e){var n=e.vertical,r=e.included,o=e.index,a=e.offset,i=e.length,s=e.classesPrefix,u={};return r||(u.visibility="hidden"),n?(u.bottom=a+"%",u.height=i+"%"):(u.left=a+"%",u.width=i+"%"),t.h("div",{class:s+"track "+s+"track-"+o,style:u})},r}(t.Component),E=function(e){function r(t){var n=e.call(this,t)||this,r=null!=t.value?t.value:null!=t.defaultValue?t.defaultValue:t.min;return n.state={dragging:!1,value:n.clampAlignValue(r)},n}return n(r,e),r.prototype.componentWillReceiveProps=function(e){if("value"in e||"min"in e||"max"in e){var t=this.state.value,n=null==e.value?t:e.value,r=this.clampAlignValue(n,e);r!==t&&(this.setState({value:r}),a(n,e)&&this.props.onChange(r))}},r.prototype.render=function(e,n){var r=e.min,o=e.max,a=e.vertical,i=e.included,s=e.disabled,u=e.classesPrefix,l=e.tipFormatter,c=n.value,d=n.dragging,p=this.calcOffset(c),h=t.h(P,{vertical:a,disabled:s,dragging:d,min:r,max:o,value:c,index:1,offset:p,classesPrefix:u,ref:this.saveHandle,key:"handle-0"},l(c)),f=t.h(B,{vertical:a,included:i,index:1,offset:0,length:p,classesPrefix:u,key:"track-0"});return this.renderBase(f,h)},r.prototype.getValue=function(){return this.state.value},r.prototype.getLowerBound=function(){return this.props.min},r.prototype.getUpperBound=function(){return this.state.value},r.prototype.onChange=function(e){var t=this.props;!("value"in t)&&this.setState(e),t.onChange(e.value)},r.prototype.onStart=function(e){this.setState({dragging:!0});var t=this.getValue();this.props.onBeforeChange(t);var n=this.calcValueByPos(e);n!==t&&this.onChange({value:n})},r.prototype.onMove=function(e){var t=this.calcValueByPos(e);t!==this.state.value&&this.onChange({value:t})},r.prototype.onEnd=function(){this.setState({dragging:!1})},r.prototype.clampAlignValue=function(e,t){void 0===t&&(t={});var n=x({},this.props,t);return u(o(e,n),n)},r}(S),M=function(e){function r(t){var n=e.call(this,t)||this,r=t.count,o=t.min,a=t.max,i=Array(r+1).slice().map(function(){return o}),s=(null!=t.value?t.value:null!=t.defaultValue?t.defaultValue:i).map(function(e){return n.clampAlignValue(e)}),u=s[0]===a?0:s.length-1;return n.state={handle:null,recent:u,bounds:s},n}return n(r,e),r.prototype.componentWillReceiveProps=function(e){var t=this;if("value"in e||"min"in e||"max"in e){var n=this.state.bounds,r=(e.value||n).map(function(n){return t.clampAlignValue(n,e)});r.length===n.length&&r.every(function(e,t){return e===n[t]})||(this.setState({bounds:r}),n.some(function(t){return a(t,e)})&&this.props.onChange(r))}},r.prototype.render=function(e,n){var r=this,o=e.min,a=e.max,i=e.vertical,s=e.included,u=e.disabled,l=e.classesPrefix,c=e.tipFormatter,d=n.handle,p=n.bounds,h=p.map(function(e){return r.calcOffset(e)}),f=p.map(function(e,n){return t.h(P,{vertical:i,disabled:u,dragging:d===n,min:o,max:a,value:e,index:n+1,offset:h[n],classesPrefix:l,ref:function(e){return r.saveHandle(e,n)},key:"handle-"+n},c(e))}),v=p.slice(0,-1).map(function(e,n){var r=n+1;return t.h(B,{vertical:i,included:s,index:r,offset:h[n],length:h[r]-h[n],classesPrefix:l,key:"track-"+n})});return this.renderBase(v,f)},r.prototype.getValue=function(){return this.state.bounds},r.prototype.getLowerBound=function(){return this.state.bounds[0]},r.prototype.getUpperBound=function(){var e=this.state.bounds;return e[e.length-1]},r.prototype.onChange=function(e){var t=this.props;!("value"in t)?this.setState(e):void 0!==e.handle&&this.setState({handle:e.handle});var n=x({},this.state,e);t.onChange(n.bounds)},r.prototype.onStart=function(e){var t=this.props,n=this.state,r=this.getValue();t.onBeforeChange(r);var o=this.calcValueByPos(e),a=this.getClosestBound(o),i=this.getBoundNeedMoving(o,a);if(this.setState({handle:i,recent:i}),o!==r[i]){var s=n.bounds.slice();s[i]=o,this.onChange({bounds:s})}},r.prototype.onMove=function(e){var t=this.props,n=this.state;if(null!=n.handle){var r=this.calcValueByPos(e);if(r!==n.bounds[n.handle]){var o=n.bounds.slice();o[n.handle]=r;var a=n.handle;if(!1!==t.pushable){var i=n.bounds[a];this.pushSurroundingHandles(o,a,i)}else t.allowCross&&(o.sort(function(e,t){return e-t}),a=o.indexOf(r));this.onChange({handle:a,bounds:o})}}},r.prototype.onEnd=function(){this.setState({handle:null})},r.prototype.clampAlignValue=function(e,t){void 0===t&&(t={});var n=x({},this.props,t);return u(this.clampValueToSurroundingHandles(o(e,n),n),n)},r.prototype.getClosestBound=function(e){for(var t=this.state.bounds,n=0,r=1,o=t.length-1;r<o;r++)e>t[r]&&(n=r);return Math.abs(t[n+1]-e)<Math.abs(t[n]-e)&&(n+=1),n},r.prototype.getBoundNeedMoving=function(e,t){var n=this.state,r=n.bounds,o=n.recent,a=t,i=t+1;return r[i]===r[t]&&(a=r[o]===r[t]?o:i,e!==r[i]&&(a=e<r[i]?t:i)),a},r.prototype.pushSurroundingHandles=function(e,t,n){var r=Number(this.props.pushable),o=e[t],a=0;if(e[t+1]-o<r&&(a=1),o-e[t-1]<r&&(a=-1),0!==a){var i=t+a,s=a*(e[i]-o);this.pushHandle(e,i,a,r-s)||(e[t]=n)}},r.prototype.pushHandle=function(e,t,n,r){for(var o=e[t],a=e[t];n*(a-o)<r;){if(!this.pushHandleOnePoint(e,t,n))return e[t]=o,!1;a=e[t]}return!0},r.prototype.pushHandleOnePoint=function(e,t,n){var r=this.getPoints(),o=r.indexOf(e[t])+n;if(o>=r.length||o<0)return!1;var a=t+n,i=r[o],s=Number(this.props.pushable),u=n*(e[a]-i);return!!this.pushHandle(e,a,n,s-u)&&(e[t]=i,!0)},r.prototype.getPoints=function(){var e=this.props,t=e.marks,n=e.step,r=e.min,o=e.max,a=this.pointsCache;if(!a||a.marks!==t||a.step!==n){var i=x({},t);if(null!=n)for(var s=r;s<=o;s+=n)i[s]=String(s);var u=Object.keys(i).map(Number);u.sort(function(e,t){return e-t}),this.pointsCache={marks:t,step:n,points:u}}return this.pointsCache.points},r.prototype.clampValueToSurroundingHandles=function(e,t){var n=t.allowCross,r=this.state,o=r.handle,a=r.bounds;if(!n&&null!=o){if(o>0&&e<=a[o-1])return a[o-1];if(o<a.length-1&&e>=a[o+1])return a[o+1]}return e},r}(S);M.defaultProps=x({},S.defaultProps,{count:1,allowCross:!0,pushable:!1}),e.Slider=E,e.MultiSlider=M,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],t):t(e.PreactRangeSlider=e.PreactRangeSlider||{},e.preact)}(this,function(e,t){"use strict";function n(e,t){function n(){this.constructor=e}b(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function r(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t]}function o(e,t){var n=t.min,r=t.max;return e<=n?n:e>=r?r:e}function a(e,t){var n=t.min,r=t.max;return e<n||e>r}function i(e){var t=e.toString(),n=t.indexOf("."),r=0;return-1!==n&&(r=t.length-n-1),r}function s(e,t){var n=t.marks,r=t.step,o=t.min,a=Object.keys(n).map(Number);if(null!=r&&r>0){var i=Math.round((e-o)/r)*r+o;a.push(i)}var s=a.map(function(t){return Math.abs(e-t)});return a[s.indexOf(Math.min.apply(Math,s))]||o}function u(e,t){var n=t.step,r=s(e,t);return null==n||n<1?r:Number(r.toFixed(i(n)))}function l(e,t){var n=t.getBoundingClientRect();return e?n.top+n.height/2:n.left+n.width/2}function c(e,t){return e?t.clientY:t.pageX}function d(e,t){return e?t.touches[0].clientY:t.touches[0].pageX}function p(e,t){return t.some(function(t){return e.target===t})}function h(e){return e.touches.length>1||"touchend"===e.type.toLowerCase()&&e.touches.length>0}function f(e){e.stopPropagation(),e.preventDefault()}function v(e,t){for(var n=[],r=Object.keys(e),o=0,a=r.length;o<a;o++){var i=r[o];e[i]&&n.push(i)}return t&&(n=t.concat(n)),n.join(" ")}function m(e){var n=e.min,r=e.max,o=e.lowerBound,a=e.upperBound,i=e.marks,s=e.included,u=e.vertical,l=e.classesPrefix,c=Object.keys(i),d=.9*(100/(c.length-1)),p=r-n,h=c.map(Number).sort(function(e,t){return e-t}).map(function(e){var r=!s&&e===a||s&&e<=a&&e>=o,c=v((m={},m[l+"active"]=r,m),[l+"text"]),h=u?{marginBottom:"-50%",bottom:(e-n)/p*100+"%"}:{width:d+"%",marginLeft:-d/2+"%",left:(e-n)/p*100+"%"},f=i[e];return t.h("span",{class:c,style:h,key:String(e)},f);var m});return t.h("div",{class:l+"marks"},h)}function g(e){var n=e.min,r=e.max,o=e.step,a=e.lowerBound,i=e.upperBound,s=e.marks,u=e.dots,l=e.included,c=e.vertical,d=e.classesPrefix,p=r-n,h=y(s,u,o,n,r).map(function(e){var r=Math.abs(e-n)/p*100+"%",o=c?{bottom:r}:{left:r},s=!l&&e===i||l&&e<=i&&e>=a,u=v((h={},h[d+"active"]=s,h),[d+"dot"]);return t.h("span",{class:u,style:o,key:String(e)});var h});return t.h("div",{class:d+"steps"},h)}function y(e,t,n,r,o){var a=Object.keys(e).map(Number);if(t&&n>0)for(var i=r;i<=o;i+=n)-1===a.indexOf(i)&&a.push(i);return a}var b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},x=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},S=function(e){function o(){var t=null!==e&&e.apply(this,arguments)||this;return t.dragOffset=0,t.handlesRefs=[],t.saveSlider=function(e){t.sliderRef=e},t.saveHandle=function(e,n){void 0===n&&(n=0),null==e?delete t.handlesRefs[n]:t.handlesRefs[n]=e.base},t.onMouseDown=function(e){if(0===e.button){var n=t.props.vertical,r=c(n,e);if(p(e,t.handlesRefs)){var o=l(n,e.target);t.dragOffset=r-o,r=o}else t.dragOffset=0;t.onStart(r),t.addDocumentMouseEvents(),f(e)}},t.onTouchStart=function(e){if(!h(e)){var n=t.props.vertical,r=d(n,e);if(p(e,t.handlesRefs)){var o=l(n,e.target);t.dragOffset=r-o,r=o}else t.dragOffset=0;t.onStart(r),t.addDocumentTouchEvents(),f(e)}},t.onMouseMove=function(e){if(t.sliderRef){var n=c(t.props.vertical,e);t.onMove(n-t.dragOffset),f(e)}else t.onEnd()},t.onTouchMove=function(e){if(t.sliderRef&&!h(e)){var n=d(t.props.vertical,e);t.onMove(n-t.dragOffset),f(e)}else t.onEnd()},t.onEventEnd=function(){t.removeDocumentEvents(),t.onEnd(),t.props.onAfterChange(t.getValue())},t}return n(o,e),o.prototype.componentWillUnmount=function(){this.removeDocumentEvents()},o.prototype.renderBase=function(e,n){var o=this.props,a=o.min,i=o.max,s=o.step,u=o.marks,l=o.dots,c=o.included,d=o.vertical,p=o.disabled,h=o.className,f=o.classesPrefix,y=o.children,b=this.getLowerBound(),x=this.getUpperBound(),S=v((P={},P[f+"with-marks"]=Object.keys(u).length,P[f+"vertical"]=d,P[f+"disabled"]=p,P),[h]);return t.h("div",{class:S,ref:this.saveSlider,onTouchStart:p?r:this.onTouchStart,onMouseDown:p?r:this.onMouseDown},t.h("div",{class:f+"rail"}),e,t.h(g,{vertical:d,marks:u,dots:l,step:s,included:c,lowerBound:b,upperBound:x,max:i,min:a,classesPrefix:f}),n,t.h(m,{vertical:d,marks:u,included:c,lowerBound:b,upperBound:x,max:i,min:a,classesPrefix:f}),y);var P},o.prototype.getSliderStart=function(){var e=this.sliderRef;if(!e)return 0;var t=e.getBoundingClientRect();return this.props.vertical?t.top:t.left},o.prototype.getSliderLength=function(){var e=this.sliderRef;return e?this.props.vertical?e.clientHeight:e.clientWidth:0},o.prototype.calcValue=function(e){var t=this.props,n=t.vertical,r=t.min,o=t.max,a=Math.abs(Math.max(e,0)/this.getSliderLength());return n?(1-a)*(o-r)+r:a*(o-r)+r},o.prototype.calcValueByPos=function(e){var t=e-this.getSliderStart();return this.clampAlignValue(this.calcValue(t))},o.prototype.calcOffset=function(e){var t=this.props,n=t.min;return 100*((e-n)/(t.max-n))},o.prototype.addDocumentMouseEvents=function(){document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onEventEnd)},o.prototype.addDocumentTouchEvents=function(){document.addEventListener("touchmove",this.onTouchMove),document.addEventListener("touchend",this.onEventEnd)},o.prototype.removeDocumentEvents=function(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onEventEnd),document.removeEventListener("touchmove",this.onTouchMove),document.removeEventListener("touchend",this.onEventEnd)},o}(t.Component);S.defaultProps={min:0,max:100,step:1,marks:{},dots:!1,included:!0,vertical:!1,disabled:!1,className:"range-slider",classesPrefix:"",onBeforeChange:r,onChange:r,onAfterChange:r,tipFormatter:String};var P=function(e){function r(){var t=null!==e&&e.apply(this,arguments)||this;return t.saveElement=function(e){t.elementRef=e},t}return n(r,e),r.prototype.render=function(e){var n=e.min,r=e.max,o=e.value,a=e.vertical,i=e.disabled,s=e.dragging,u=e.index,l=e.offset,c=e.classesPrefix,d=e.children,p=a?{bottom:l+"%"}:{left:l+"%"};s&&this.elementRef&&this.elementRef.focus();var h=v((f={},f[c+"dragging"]=s,f),[c+"handle",c+"handle-"+u]);return t.h("div",{class:h,style:p,role:"slider",tabIndex:i?void 0:0,"aria-orientation":a?"vertical":"horizontal","aria-disabled":String(i),"aria-valuemin":n,"aria-valuemax":r,"aria-valuenow":o,ref:this.saveElement},t.h("span",{class:c+"tip"},d));var f},r}(t.Component),B=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return n(r,e),r.prototype.render=function(e){var n=e.vertical,r=e.included,o=e.index,a=e.offset,i=e.length,s=e.classesPrefix,u={};return r||(u.visibility="hidden"),n?(u.bottom=a+"%",u.height=i+"%"):(u.left=a+"%",u.width=i+"%"),t.h("div",{class:s+"track "+s+"track-"+o,style:u})},r}(t.Component),E=function(e){function r(t){var n=e.call(this,t)||this,r=null!=t.value?t.value:null!=t.defaultValue?t.defaultValue:t.min;return n.state={dragging:!1,value:n.clampAlignValue(r)},n}return n(r,e),r.prototype.componentWillReceiveProps=function(e){if("value"in e||"min"in e||"max"in e){var t=this.state.value,n=null==e.value?t:e.value,r=this.clampAlignValue(n,e);r!==t&&(this.setState({value:r}),a(n,e)&&this.props.onChange(r))}},r.prototype.render=function(e,n){var r=e.min,o=e.max,a=e.vertical,i=e.included,s=e.disabled,u=e.classesPrefix,l=e.tipFormatter,c=n.value,d=n.dragging,p=this.calcOffset(c),h=t.h(P,{vertical:a,disabled:s,dragging:d,min:r,max:o,value:c,index:1,offset:p,classesPrefix:u,ref:this.saveHandle,key:"handle-0"},l(c)),f=t.h(B,{vertical:a,included:i,index:1,offset:0,length:p,classesPrefix:u,key:"track-0"});return this.renderBase(f,h)},r.prototype.getValue=function(){return this.state.value},r.prototype.getLowerBound=function(){return this.props.min},r.prototype.getUpperBound=function(){return this.state.value},r.prototype.onChange=function(e){var t=this.props;!("value"in t)&&this.setState(e),t.onChange(e.value)},r.prototype.onStart=function(e){this.setState({dragging:!0});var t=this.getValue();this.props.onBeforeChange(t);var n=this.calcValueByPos(e);n!==t&&this.onChange({value:n})},r.prototype.onMove=function(e){var t=this.calcValueByPos(e);t!==this.state.value&&this.onChange({value:t})},r.prototype.onEnd=function(){this.setState({dragging:!1})},r.prototype.clampAlignValue=function(e,t){void 0===t&&(t={});var n=x({},this.props,t);return u(o(e,n),n)},r}(S),M=function(e){function r(t){var n=e.call(this,t)||this,r=t.count,o=t.min,a=t.max,i=Array(r+1).slice().map(function(){return o}),s=(null!=t.value?t.value:null!=t.defaultValue?t.defaultValue:i).map(function(e){return n.clampAlignValue(e)}),u=s[0]===a?0:s.length-1;return n.state={handle:null,recent:u,bounds:s},n}return n(r,e),r.prototype.componentWillReceiveProps=function(e){var t=this;if("value"in e||"min"in e||"max"in e){var n=this.state.bounds,r=(e.value||n).map(function(n){return t.clampAlignValue(n,e)});r.length===n.length&&r.every(function(e,t){return e===n[t]})||(this.setState({bounds:r}),n.some(function(t){return a(t,e)})&&this.props.onChange(r))}},r.prototype.render=function(e,n){var r=this,o=e.min,a=e.max,i=e.vertical,s=e.included,u=e.disabled,l=e.classesPrefix,c=e.tipFormatter,d=n.handle,p=n.bounds,h=p.map(function(e){return r.calcOffset(e)}),f=p.map(function(e,n){return t.h(P,{vertical:i,disabled:u,dragging:d===n,min:o,max:a,value:e,index:n+1,offset:h[n],classesPrefix:l,ref:function(e){return r.saveHandle(e,n)},key:"handle-"+n},c(e))}),v=p.slice(0,-1).map(function(e,n){var r=n+1;return t.h(B,{vertical:i,included:s,index:r,offset:h[n],length:h[r]-h[n],classesPrefix:l,key:"track-"+n})});return this.renderBase(v,f)},r.prototype.getValue=function(){return this.state.bounds},r.prototype.getLowerBound=function(){return this.state.bounds[0]},r.prototype.getUpperBound=function(){var e=this.state.bounds;return e[e.length-1]},r.prototype.onChange=function(e){var t=this.props;!("value"in t)?this.setState(e):void 0!==e.handle&&this.setState({handle:e.handle});var n=x({},this.state,e);t.onChange(n.bounds)},r.prototype.onStart=function(e){var t=this.props,n=this.state,r=this.getValue();t.onBeforeChange(r);var o=this.calcValueByPos(e),a=this.getClosestBound(o),i=this.getBoundNeedMoving(o,a);if(this.setState({handle:i,recent:i}),o!==r[i]){var s=n.bounds.slice();s[i]=o,this.onChange({bounds:s})}},r.prototype.onMove=function(e){var t=this.props,n=this.state;if(null!=n.handle){var r=this.calcValueByPos(e);if(r!==n.bounds[n.handle]){var o=n.bounds.slice();o[n.handle]=r;var a=n.handle;if(!1!==t.pushable){var i=n.bounds[a];this.pushSurroundingHandles(o,a,i)}else t.allowCross&&(o.sort(function(e,t){return e-t}),a=o.indexOf(r));this.onChange({handle:a,bounds:o})}}},r.prototype.onEnd=function(){this.setState({handle:null})},r.prototype.clampAlignValue=function(e,t){void 0===t&&(t={});var n=x({},this.props,t);return u(this.clampValueToSurroundingHandles(o(e,n),n),n)},r.prototype.getClosestBound=function(e){for(var t=this.state.bounds,n=0,r=1,o=t.length-1;r<o;r++)e>t[r]&&(n=r);return Math.abs(t[n+1]-e)<Math.abs(t[n]-e)&&(n+=1),n},r.prototype.getBoundNeedMoving=function(e,t){var n=this.state,r=n.bounds,o=n.recent,a=t,i=t+1;return r[i]===r[t]&&(a=r[o]===r[t]?o:i,e!==r[i]&&(a=e<r[i]?t:i)),a},r.prototype.pushSurroundingHandles=function(e,t,n){var r=Number(this.props.pushable),o=e[t],a=0;if(e[t+1]-o<r&&(a=1),o-e[t-1]<r&&(a=-1),0!==a){var i=t+a,s=a*(e[i]-o);this.pushHandle(e,i,a,r-s)||(e[t]=n)}},r.prototype.pushHandle=function(e,t,n,r){for(var o=e[t],a=e[t];n*(a-o)<r;){if(!this.pushHandleOnePoint(e,t,n))return e[t]=o,!1;a=e[t]}return!0},r.prototype.pushHandleOnePoint=function(e,t,n){var r=this.getPoints(),o=r.indexOf(e[t])+n;if(o>=r.length||o<0)return!1;var a=t+n,i=r[o],s=Number(this.props.pushable),u=n*(e[a]-i);return!!this.pushHandle(e,a,n,s-u)&&(e[t]=i,!0)},r.prototype.getPoints=function(){var e=this.props,t=e.marks,n=e.step,r=e.min,o=e.max,a=this.pointsCache;if(!a||a.marks!==t||a.step!==n){var i=x({},t);if(null!=n&&n>0)for(var s=r;s<=o;s+=n)i[s]=String(s);var u=Object.keys(i).map(Number);u.sort(function(e,t){return e-t}),this.pointsCache={marks:t,step:n,points:u}}return this.pointsCache.points},r.prototype.clampValueToSurroundingHandles=function(e,t){var n=t.allowCross,r=this.state,o=r.handle,a=r.bounds;if(!n&&null!=o){if(o>0&&e<=a[o-1])return a[o-1];if(o<a.length-1&&e>=a[o+1])return a[o+1]}return e},r}(S);M.defaultProps=x({},S.defaultProps,{count:1,allowCross:!0,pushable:!1}),e.Slider=E,e.MultiSlider=M,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "preact-range-slider",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Preact component for input values with range slider",
@@ -41,16 +41,18 @@ "main": "es5/index.js",
     "preact": "^8.1.0",
-    "tslib": "^1.7.0"
+    "tslib": "^1.7.1"
   },
   "devDependencies": {
     "dart-sass": "^1.0.0-alpha.9",
+    "preact": "^8.1.0",
     "rollup": "^0.41.6",
     "rollup-plugin-node-resolve": "^3.0.0",
-    "tslint": "^5.2.0",
+    "tslib": "^1.7.1",
+    "tslint": "^5.3.2",
     "tslint-config-m18": "^1.2.0",
-    "typescript": "^2.3.2",
-    "uglify-js": "^3.0.4"
+    "typescript": "^2.3.4",
+    "uglify-js": "^3.0.14"
   },
   "dependencies": {
-    "classjoin": "^0.1.0"
+    "classjoin": "^0.2.1"
   }
 }

README.md

@@ -5,4 +5,147 @@ # preact-range-slider
 
-It’s currently in alpha stage, so…
+Based on `rc-slider` for React, with a lot of changes (so, this component is not
+compatible with original).
 
-Documentation coming soon…
+Written in TypeScript, types are also included.
+
+## Demo
+
+[On CodePen](https://codepen.io/avol/pen/LyovJb).
+
+## Installation
+
+For bundlers and other NPM-based environments:
+
+```
+npm install --save-dev preact tslib preact-range-slider
+```
+
+Package `tslib` required in ES5-ESM version for `__extends` and `__assign`
+helper functions. It's not required for ES2015 version and for UMD version
+(functions is included in UMD).
+
+## Usage
+
+There is two components:
+
+* `Slider` — for range slider with one handle.
+* `MultiSlider` — for range slider with multiple handles (two and more).
+
+```jsx
+render(
+	<div>
+		<Slider />
+		<MultiSlider />
+	</div>,
+	container
+);
+```
+
+### UMD
+
+UMD is default for this package, so just use something like:
+
+```js
+import {Slider, MultiSlider} from 'preact-range-slider';
+// or
+const {Slider, MultiSlider} = require( 'preact-range-slider' );
+```
+
+For using directly in browser (import with `<script>` tag in HTML-file):
+
+* [Development version](https://unpkg.com/preact-range-slider/es5/index.js)
+* [Production version](https://unpkg.com/preact-range-slider/es5/preact-range-slider.min.js)
+
+You can use AMD or `PreactRangeSlider` global variable.
+
+### ES2015 module systems
+
+Package contain `module` property for use with ES2015 module bundlers
+(like Rollup and Webpack 2).
+
+### ES2015 code base
+
+If you don't want to use transplitted to ES5 code, you can use included
+ES2015 version.
+
+You can directly import this version:
+
+```js
+import {Slider, MultiSlider} from 'preact-range-slider/es2015';
+```
+
+Or specify alias in Webpack config:
+
+```js
+{
+	// …
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js'],
+		alias: {
+			'preact-range-slider': 'preact-range-slider/es2015',
+		},
+	},
+};
+```
+
+### Styles
+
+You can use SCSS mixin from `preact-range-slider/assets/_mixin.scss`, where
+you can specify prefix for internal classes:
+
+```scss
+div.my-range-slider
+{
+	@import "mixin";
+	@include range-slider("my-");
+}
+```
+
+Or you can use compiled CSS file `preact-range-slider/assets/index.css` with
+default parameters (`div.range-slider` element, internal classes without
+prefix).
+
+## API
+
+### Common properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `min` | `number` | `0` | The minimum value of the slider. |
+| `max` | `number` | `100` | The maximum value of the slider. |
+| `step` | `number` | `1` | Value to be added or subtracted on each step the slider makes. Step can be set to zero or less to make `marks` as steps. |
+| `marks` | `{[key: number]: string | JSX.Element | Array<string | JSX.Element>}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. |
+| `dots` | `boolean` | `false` | Show dots on slider (with step as interval)? |
+| `included` | `boolean` | `true` | As continuous value interval (otherwise, as independent values)? |
+| `vertical` | `boolean` | `false` | Vertical slider mode? |
+| `disabled` | `boolean` | `false` | Disable control (handles can't be moved)? |
+| `className` | `string` | `'range-slider'` | Component main class name. |
+| `classesPrefix` | `string` | `''` | Prefix for secondary class names in component. |
+| `tipFormatter` | `( value: number ) => string | JSX.Element | Array<string | JSX.Element>` | `String` | A function to format value on tooltip. |
+
+### Slider properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `defaultValue` | `number` | `0` | Initial value of slider. |
+| `value` | `number` | `undefined` | Current value of slider (for controlled component). |
+| `onBeforeChange` | `( value: number ) => void` | `noop` | Triggered before value is start to change (on mouse down, etc). |
+| `onChange` | `( value: number ) => void` | `noop` | Triggered while the value of Slider changing. |
+| `onAfterChange` | `( value: number ) => void` | `noop` | Triggered after slider changes stop (on mouse up, etc). |
+
+### MultiSlider properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `defaultValue` | `number[]` | `[0, 0]` | Initial value of slider. |
+| `value` | `number[]` | `undefined` | Current value of slider (for controlled component). |
+| `count` | `number` | `1` | How many ranges to render (handles count = count + 1). |
+| `allowCross` | `boolean` | `true` | Allow handles to cross each other? |
+| `pushable` | `boolean | number` | `false` | Allow pushing of surrounding handles when moving? When set to a number, the number will be the minimum ensured distance between handles. |
+| `onBeforeChange` | `( value: number[] ) => void` | `noop` | Triggered before value is start to change (on mouse down, etc). |
+| `onChange` | `( value: number[] ) => void` | `noop` | Triggered while the value of Slider changing. |
+| `onAfterChange` | `( value: number[] ) => void` | `noop` | Triggered after slider changes stop (on mouse up, etc). |
+
+## License
+
+[MIT](https://github.com/m18ru/preact-range-slider/blob/master/LICENSE).

src/utils.ts

@@ -83,3 +83,6 @@ import {SliderMarks} from './components/AbstractSlider';
 	
-	if ( step != null )
+	if (
+		( step != null )
+		&& ( step > 0 )
+	)
 	{
@@ -112,3 +115,8 @@ const closestStep = Math.round( (value - min) / step) * step + min;
 	return (
-		( step == null )
+		(
+			// If step is less than 1, value is taken from marks and should not
+			// be rounded.
+			( step == null )
+			|| ( step < 1 )
+		)
 		? closestPoint
@@ -115,0 +123,0 @@ : Number(

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

Improved metrics

Total package byte prevSize

230973

increased by2.59%

Lines of code

4615

increased by0.44%

Number of lines in readme file

151

increased by1787.5%

Worsened metrics

Dev dependency count

9

increased by28.57%

Dependency changes

• + Addedclassjoin@0.2.1(transitive)

• - Removedclassjoin@0.1.0(transitive)

• Updatedclassjoin@^0.2.1