react-double-range-slider - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist/cjs/components/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./RangeSlider";
+export { default as RangeSlider } from "./RangeSlider";

dist/cjs/components/RangeSlider/index.d.ts

@@ -1,2 +0,1 @@
-import RangeSlider from "./RangeSlider";
-export { RangeSlider };
+export { default } from "./RangeSlider";

dist/cjs/components/RangeSlider/RangeSlider.types.d.ts

@@ -10,2 +10,5 @@ export interface Simple {
     value: Simple | any[];
+    from?: number | string;
+    to?: number | string;
+    formatter?: (value: number | string) => string;
     onChange: (x: any) => void;
@@ -12,0 +15,0 @@ }

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)},r=function(e,t){var n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return!(n.top+n.height<r.top||n.top>r.top+r.height||n.left+n.width<r.left||n.left>r.left+r.width)};exports.RangeSlider=function(i){var l,u,c,a=i.hasSteps,d=i.tooltipVisibility,o=i.tooltipPosition,s=i.value,h=i.onChange,f=s instanceof Array?s:Array.from((l=s.min,u=s.max+1,c=1,Array.from(Array.from(Array(Math.ceil((u-l)/c)).keys()),(function(e){return l+e*c})))),v=t.useState({value:f.at(0)instanceof Array?f.at(0):f.at(0).toString(),valueIndex:0}),x=v[0],g=v[1],m=t.useState({value:f.at(f.length-1)instanceof String?f.at(f.length-1):f.at(f.length-1).toString(),valueIndex:f.length-1}),p=m[0],S=m[1];d||(d="always");var y=t.useState(null),b=y[0],W=y[1],j=t.useState(null),I=j[0],M=j[1],w=t.useState(null),N=w[0],R=w[1],O=t.useState("always"===d?"visible":"hidden"),C=O[0],E=O[1],L=t.useState("hidden"),A=L[0],B=L[1],D=t.useState("always"===d?"visible":"hidden"),k=D[0],X=D[1],P=t.useState(null),q=P[0],_=P[1],V=t.useState(null),z=V[0],F=V[1],G=t.useState(null),H=G[0],J=G[1],K=t.useState(!1),Q=K[0],T=K[1],U=t.useState(0),Y=U[0],Z=U[1],$=t.useState(!1),ee=$[0],te=$[1],ne=t.useRef(null),re=t.useRef(null),ie=t.useRef(null),le=t.useRef(null),ue=t.useRef(null),ce=t.useRef(null),ae=t.useRef(null),de=t.useState(null),oe=de[0],se=de[1],he=t.useState(null),fe=he[0],ve=he[1],xe=t.useState(null),ge=xe[0],me=xe[1],pe=t.useState(null),Se=pe[0],ye=pe[1],be=t.useState(null),We=be[0],je=be[1],Ie=t.useState(null),Me=Ie[0],we=Ie[1],Ne=t.useState(null),Re=Ne[0],Oe=Ne[1];t.useEffect((function(){document.addEventListener("mousemove",(function(e){Z(e.clientX)})),document.addEventListener("mouseup",(function(e){ye(null),te(!1),"hover"===d&&(E("hidden"),X("hidden"),B("hidden"))})),le.current&&ae.current&&(M(le.current.clientWidth-ae.current.clientWidth/2),je(ae.current.clientWidth)),ce.current&&(se(ce.current.clientWidth/-2),W(ce.current.clientWidth/-2)),ae.current&&ue.current&&(ve(ue.current.clientWidth-ae.current.clientWidth/2),M(ue.current.clientWidth-ae.current.clientWidth/2)),ue.current&&R({width:ue.current.clientWidth,left:ue.current.offsetLeft}),ne.current&&ie.current&&(_(ne.current.clientWidth/2),F(ie.current.clientWidth/2))}),[]),t.useEffect((function(){ne.current&&ie.current&&T(r(ne.current,ie.current||x.valueIndex===p.valueIndex&&null!==x.valueIndex&&null!==p.valueIndex))}),[q,z]),t.useEffect((function(){"hover"===d?Q&&ee?(B("visible"),E("hidden"),X("hidden")):ge===ce.current&&ee?(E("visible"),B("hidden"),X("hidden")):ge===ae.current&&ee?(X("visible"),B("hidden"),E("hidden")):(E("hidden"),X("hidden"),B("hidden")):"always"===d&&(Q?(B("visible"),E("hidden"),X("hidden")):(B("hidden"),E("visible"),X("visible")))}),[Q]),t.useEffect((function(){null!==b&&null!==I&&We&&R({left:b+We/2,width:I-b}),N&&re.current&&J(N.left+N.width/2-re.current.clientWidth/2),Re&&Ee(Re)}),[Re]),t.useEffect((function(){h({min:x.value,max:p.value,minIndex:x.valueIndex,maxIndex:p.valueIndex})}),[x.value,p.value]),t.useEffect((function(){if(ee&&Se&&ge&&oe&&fe&&We&&null!==Me&&le.current&&null!==b&&null!==I){var e=(Me||0)+(Y-Se),t=Math.round(e/(le.current.clientWidth/(f.length-1))),n=le.current.clientWidth/(f.length-1)*t-We/2;if(a){if(n>=oe&&n<=fe){if(ge===ce.current&&n>I)return;if(ge===ae.current&&n<b)return;ge===ce.current&&W(n),ge===ae.current&&M(n)}}else if(e>=oe&&e<=fe){if(ge===ce.current&&e>=I)return;if(ge===ae.current&&e<=b)return;ge===ce.current&&W(e),ge===ae.current&&M(e)}Oe(ge)}}),[Y]);var Ce=function(e){if(e.preventDefault(),ce.current&&ae.current&&We&&oe&&fe&&null!==b&&null!==I){var t=Math.abs(e.clientX-ce.current.getBoundingClientRect().left)>Math.abs(e.clientX-ae.current.getBoundingClientRect().left)?ae.current:ce.current;we(t.offsetLeft),console.log(t);var n=t.offsetLeft+(e.clientX-t.getBoundingClientRect().left)-We/2,r=Math.round(n/(le.current.clientWidth/(f.length-1))),i=le.current.clientWidth/(f.length-1)*r-We/2;if(a){if(i>=oe&&i<=fe){if(t===ce.current&&i>I)return;if(t===ae.current&&i<b)return;t===ce.current&&W(i),t===ae.current&&M(i)}}else if(n>=oe&&n<=fe){if(t===ce.current&&n>=I)return;if(t===ae.current&&n<=b)return;t===ce.current&&W(n),t===ae.current&&M(n)}Oe(t)}},Ee=function(e){if(le.current&&ue.current&&e&&We){var t=le.current.clientWidth/f.length,n=Number(e.style.left.replace("px",""));n=(n=n>le.current.clientWidth?le.current.clientWidth:n)<=0?0:n;var i=Math.floor((n+We/2)/t);i>=f.length&&(i=f.length-1);var l=f.at(i)instanceof String?f.at(i):f.at(i).toString();e===ce.current&&g({value:l,valueIndex:i}),e===ae.current&&S({value:l,valueIndex:i}),ne.current&&ie.current&&(_(ne.current.clientWidth/2),F(ie.current.clientWidth/2),T(r(ne.current,ie.current)||x.valueIndex===p.valueIndex&&null!==x.valueIndex&&null!==p.valueIndex))}Oe(null)};return e.jsxs("div",n({className:"slider-container"},{children:[e.jsx("div",n({className:"rail",ref:le,onClick:Ce},{children:a&&f.map((function(t,n){return le.current&&n>0&&n<f.length-1&&e.jsx("div",{className:"step",style:{left:"".concat(le.current.clientWidth/(f.length-1)*n-2.5,"px")}},n)}))})),e.jsx("div",{className:"track",ref:ue,style:N?{left:"".concat(N.left,"px"),width:"".concat(N.width,"px")}:void 0,onMouseOver:function(){"hover"===d&&Q?(B("visible"),E("hidden"),X("hidden")):"hover"===d&&(B("hidden"),E("hidden"),X("hidden"))},onMouseOut:function(){("hover"===d&&Q||"hover"===d)&&(B("hidden"),E("hidden"),X("hidden"))},onClick:Ce}),e.jsx("div",n({className:"min ball".concat(ge===ce.current?" active":""),style:{left:"".concat(b,"px")},ref:ce,onMouseOver:function(){"hover"!==d||Q?"hover"===d&&Q&&(E("hidden"),B("visible")):(E("visible"),B("hidden"))},onMouseOut:function(){"hover"!==d||Q?"hover"===d&&Q&&(E("hidden"),B("hidden")):(E("hidden"),B("hidden"))},onMouseDown:function(e){e.preventDefault(),ye(Y),me(ce.current),we(b),te(!0)}},{children:e.jsx("div",n({className:"tooltip ".concat(o||"over"),style:{visibility:C,marginLeft:"-".concat(q,"px")},ref:ne},{children:e.jsx("p",n({className:"min-text-holder text-holder"},{children:x.value}))}))})),e.jsx("div",n({className:"mid tooltip ".concat(o||"over"),ref:re,style:{visibility:A,left:"".concat(H,"px")}},{children:e.jsx("p",n({className:"mid-text-holder text-holder"},{children:x.value===p.value?"".concat(x.value):"".concat(x.value," - ").concat(p.value)}))})),e.jsx("div",n({className:"max ball".concat(ge===ae.current?" active":""),style:{left:"".concat(I,"px")},ref:ae,onMouseOver:function(){"hover"!==d||Q?"hover"===d&&Q&&(X("hidden"),B("visible")):(X("visible"),B("hidden"))},onMouseOut:function(){"hover"!==d||Q?"hover"===d&&Q&&(X("hidden"),B("hidden")):(X("hidden"),B("hidden"))},onMouseDown:function(e){e.preventDefault(),ye(Y),me(ae.current),we(I),te(!0)}},{children:e.jsx("div",n({className:"tooltip ".concat(o||"over"),style:{visibility:k,marginLeft:"-".concat(z,"px")},ref:ie},{children:e.jsx("p",n({className:"max-text-holder text-holder"},{children:p.value}))}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)},r=function(e,t){var n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return!(n.top+n.height<r.top||n.top>r.top+r.height||n.left+n.width<r.left||n.left>r.left+r.width)};exports.RangeSlider=function(i){var l=i.hasSteps,u=i.tooltipVisibility,c=i.tooltipPosition,d=i.value,a=i.onChange,o=i.from,s=i.to,h=i.formatter,f=d instanceof Array?d:Array.from(function(e,t,n){return Array.from(Array.from(Array(Math.ceil((t-e)/n)).keys()),(function(t){return e+t*n}))}(d.min,d.max+1,1)),v=o?-1===f.indexOf(o)?0:f.indexOf(o):0,x=s?-1===f.indexOf(s)?f.length-1:f.indexOf(s):f.length-1,m=h||function(e){return"".concat(e)},g=t.useState({value:m(f.at(v)),valueIndex:v}),p=g[0],W=g[1],y=t.useState({value:m(f.at(x)),valueIndex:x}),b=y[0],S=y[1];u||(u="always");var j=t.useState(null),I=j[0],M=j[1],w=t.useState(null),O=w[0],N=w[1],R=t.useState(null),C=R[0],E=R[1],L=t.useState("always"===u?"visible":"hidden"),A=L[0],B=L[1],D=t.useState("hidden"),k=D[0],X=D[1],P=t.useState("always"===u?"visible":"hidden"),q=P[0],_=P[1],V=t.useState(null),z=V[0],F=V[1],G=t.useState(null),H=G[0],J=G[1],K=t.useState(null),Q=K[0],T=K[1],U=t.useState(!1),Y=U[0],Z=U[1],$=t.useState(0),ee=$[0],te=$[1],ne=t.useState(!1),re=ne[0],ie=ne[1],le=t.useRef(null),ue=t.useRef(null),ce=t.useRef(null),de=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),se=t.useRef(null),he=t.useState(null),fe=he[0],ve=he[1],xe=t.useState(null),me=xe[0],ge=xe[1],pe=t.useState(null),We=pe[0],ye=pe[1],be=t.useState(null),Se=be[0],je=be[1],Ie=t.useState(null),Me=Ie[0],we=Ie[1],Oe=t.useState(null),Ne=Oe[0],Re=Oe[1],Ce=t.useState(null),Ee=Ce[0],Le=Ce[1];t.useEffect((function(){document.addEventListener("mousemove",(function(e){te(e.clientX)})),document.addEventListener("mouseup",(function(e){je(null),ie(!1),"hover"===u&&(B("hidden"),_("hidden"),X("hidden"))})),de.current&&se.current&&(N(de.current.clientWidth-se.current.clientWidth/2),we(se.current.clientWidth)),oe.current&&(ve(oe.current.clientWidth/-2),M(de.current.clientWidth/(f.length-1)*v-oe.current.clientWidth/2)),se.current&&ae.current&&(ge(ae.current.clientWidth-se.current.clientWidth/2),N(de.current.clientWidth/(f.length-1)*x-se.current.clientWidth/2));var e=de.current.clientWidth/(f.length-1)*x-de.current.clientWidth/(f.length-1)*v,t=de.current.clientWidth/(f.length-1)*v;ae.current&&E({width:e,left:t}),le.current&&ce.current&&(F(le.current.clientWidth/2),J(ce.current.clientWidth/2)),ue.current&&T(t+e/2-ue.current.clientWidth/2)}),[]),t.useEffect((function(){le.current&&ce.current&&Z(r(le.current,ce.current||p.valueIndex===b.valueIndex&&null!==p.valueIndex&&null!==b.valueIndex))}),[z,H]),t.useEffect((function(){"hover"===u?Y&&re?(X("visible"),B("hidden"),_("hidden")):We===oe.current&&re?(B("visible"),X("hidden"),_("hidden")):We===se.current&&re?(_("visible"),X("hidden"),B("hidden")):(B("hidden"),_("hidden"),X("hidden")):"always"===u&&(Y?(X("visible"),B("hidden"),_("hidden")):(X("hidden"),B("visible"),_("visible")))}),[Y]),t.useEffect((function(){null!==I&&null!==O&&Me&&E({left:I+Me/2,width:O-I}),C&&ue.current&&T(C.left+C.width/2-ue.current.clientWidth/2),Ee&&Be(Ee)}),[Ee]),t.useEffect((function(){a({min:p.value,max:b.value,minIndex:p.valueIndex,maxIndex:b.valueIndex})}),[p.value,b.value]),t.useEffect((function(){if(re&&Se&&We&&fe&&me&&Me&&null!==Ne&&de.current&&null!==I&&null!==O){var e=(Ne||0)+(ee-Se),t=Math.round(e/(de.current.clientWidth/(f.length-1))),n=de.current.clientWidth/(f.length-1)*t-Me/2;if(l){if(n>=fe&&n<=me){if(We===oe.current&&n>O)return;if(We===se.current&&n<I)return;We===oe.current&&M(n),We===se.current&&N(n)}}else if(e>=fe&&e<=me){if(We===oe.current&&e>=O)return;if(We===se.current&&e<=I)return;We===oe.current&&M(e),We===se.current&&N(e)}Le(We)}}),[ee]);var Ae=function(e){if(e.preventDefault(),oe.current&&se.current&&Me&&fe&&me&&null!==I&&null!==O){var t=Math.abs(e.clientX-oe.current.getBoundingClientRect().left)>Math.abs(e.clientX-se.current.getBoundingClientRect().left)?se.current:oe.current;Re(t.offsetLeft),console.log(t);var n=t.offsetLeft+(e.clientX-t.getBoundingClientRect().left)-Me/2,r=Math.round(n/(de.current.clientWidth/(f.length-1))),i=de.current.clientWidth/(f.length-1)*r-Me/2;if(l){if(i>=fe&&i<=me){if(t===oe.current&&i>O)return;if(t===se.current&&i<I)return;t===oe.current&&M(i),t===se.current&&N(i)}}else if(n>=fe&&n<=me){if(t===oe.current&&n>=O)return;if(t===se.current&&n<=I)return;t===oe.current&&M(n),t===se.current&&N(n)}Le(t)}},Be=function(e){if(de.current&&ae.current&&e&&Me){var t=de.current.clientWidth/f.length,n=Number(e.style.left.replace("px",""));n=(n=n>de.current.clientWidth?de.current.clientWidth:n)<=0?0:n;var i=Math.floor((n+Me/2)/t);i>=f.length&&(i=f.length-1);var l=f.at(i)instanceof String?f.at(i):f.at(i).toString();e===oe.current&&W({value:m(l),valueIndex:i}),e===se.current&&S({value:m(l),valueIndex:i}),le.current&&ce.current&&(F(le.current.clientWidth/2),J(ce.current.clientWidth/2),Z(r(le.current,ce.current)||p.valueIndex===b.valueIndex&&null!==p.valueIndex&&null!==b.valueIndex))}Le(null)};return e.jsxs("div",n({className:"slider-container"},{children:[e.jsx("div",n({className:"rail",ref:de,onClick:Ae},{children:l&&f.map((function(t,n){return de.current&&n>0&&n<f.length-1&&e.jsx("div",{className:"step",style:{left:"".concat(de.current.clientWidth/(f.length-1)*n-2.5,"px")}},n)}))})),e.jsx("div",{className:"track",ref:ae,style:C?{left:"".concat(C.left,"px"),width:"".concat(C.width,"px")}:void 0,onMouseOver:function(){"hover"===u&&Y?(X("visible"),B("hidden"),_("hidden")):"hover"===u&&(X("hidden"),B("hidden"),_("hidden"))},onMouseOut:function(){("hover"===u&&Y||"hover"===u)&&(X("hidden"),B("hidden"),_("hidden"))},onClick:Ae}),e.jsx("div",n({className:"min ball".concat(We===oe.current?" active":""),style:{left:"".concat(I,"px")},ref:oe,onMouseOver:function(){"hover"!==u||Y?"hover"===u&&Y&&(B("hidden"),X("visible")):(B("visible"),X("hidden"))},onMouseOut:function(){"hover"!==u||Y?"hover"===u&&Y&&(B("hidden"),X("hidden")):(B("hidden"),X("hidden"))},onMouseDown:function(e){e.preventDefault(),je(ee),ye(oe.current),Re(I),ie(!0)}},{children:e.jsx("div",n({className:"tooltip ".concat(c||"over"),style:{visibility:A,marginLeft:"-".concat(z,"px")},ref:le},{children:e.jsx("p",n({className:"min-text-holder text-holder"},{children:p.value}))}))})),e.jsx("div",n({className:"mid tooltip ".concat(c||"over"),ref:ue,style:{visibility:k,left:"".concat(Q,"px")}},{children:e.jsx("p",n({className:"mid-text-holder text-holder"},{children:p.value===b.value?"".concat(p.value):"".concat(p.value," - ").concat(b.value)}))})),e.jsx("div",n({className:"max ball".concat(We===se.current?" active":""),style:{left:"".concat(O,"px")},ref:se,onMouseOver:function(){"hover"!==u||Y?"hover"===u&&Y&&(_("hidden"),X("visible")):(_("visible"),X("hidden"))},onMouseOut:function(){"hover"!==u||Y?"hover"===u&&Y&&(_("hidden"),X("hidden")):(_("hidden"),X("hidden"))},onMouseDown:function(e){e.preventDefault(),je(ee),ye(se.current),Re(O),ie(!0)}},{children:e.jsx("div",n({className:"tooltip ".concat(c||"over"),style:{visibility:q,marginLeft:"-".concat(H,"px")},ref:ce},{children:e.jsx("p",n({className:"max-text-holder text-holder"},{children:b.value}))}))}))]}))};
 //# sourceMappingURL=index.js.map

dist/esm/components/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./RangeSlider";
+export { default as RangeSlider } from "./RangeSlider";

dist/esm/components/RangeSlider/index.d.ts

@@ -1,2 +0,1 @@
-import RangeSlider from "./RangeSlider";
-export { RangeSlider };
+export { default } from "./RangeSlider";

dist/esm/components/RangeSlider/RangeSlider.types.d.ts

@@ -10,2 +10,5 @@ export interface Simple {
     value: Simple | any[];
+    from?: number | string;
+    to?: number | string;
+    formatter?: (value: number | string) => string;
     onChange: (x: any) => void;
@@ -12,0 +15,0 @@ }

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as t,useRef as r,useEffect as i}from"react";var l=function(){return l=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},l.apply(this,arguments)},c=function(e,n){var t=e.getBoundingClientRect(),r=n.getBoundingClientRect();return!(t.top+t.height<r.top||t.top>r.top+r.height||t.left+t.width<r.left||t.left>r.left+r.width)},u=function(u){var d,a,o,h=u.hasSteps,v=u.tooltipVisibility,f=u.tooltipPosition,s=u.value,m=u.onChange,x=s instanceof Array?s:Array.from((d=s.min,a=s.max+1,o=1,Array.from(Array.from(Array(Math.ceil((a-d)/o)).keys()),(function(e){return d+e*o})))),p=t({value:x.at(0)instanceof Array?x.at(0):x.at(0).toString(),valueIndex:0}),g=p[0],y=p[1],b=t({value:x.at(x.length-1)instanceof String?x.at(x.length-1):x.at(x.length-1).toString(),valueIndex:x.length-1}),W=b[0],I=b[1];v||(v="always");var w=t(null),M=w[0],N=w[1],O=t(null),C=O[0],L=O[1],A=t(null),S=A[0],B=A[1],D=t("always"===v?"visible":"hidden"),R=D[0],k=D[1],X=t("hidden"),j=X[0],E=X[1],P=t("always"===v?"visible":"hidden"),V=P[0],q=P[1],z=t(null),F=z[0],G=z[1],H=t(null),J=H[0],K=H[1],Q=t(null),T=Q[0],U=Q[1],Y=t(!1),Z=Y[0],$=Y[1],_=t(0),ee=_[0],ne=_[1],te=t(!1),re=te[0],ie=te[1],le=r(null),ce=r(null),ue=r(null),de=r(null),ae=r(null),oe=r(null),he=r(null),ve=t(null),fe=ve[0],se=ve[1],me=t(null),xe=me[0],pe=me[1],ge=t(null),ye=ge[0],be=ge[1],We=t(null),Ie=We[0],we=We[1],Me=t(null),Ne=Me[0],Oe=Me[1],Ce=t(null),Le=Ce[0],Ae=Ce[1],Se=t(null),Be=Se[0],De=Se[1];i((function(){document.addEventListener("mousemove",(function(e){ne(e.clientX)})),document.addEventListener("mouseup",(function(e){we(null),ie(!1),"hover"===v&&(k("hidden"),q("hidden"),E("hidden"))})),de.current&&he.current&&(L(de.current.clientWidth-he.current.clientWidth/2),Oe(he.current.clientWidth)),oe.current&&(se(oe.current.clientWidth/-2),N(oe.current.clientWidth/-2)),he.current&&ae.current&&(pe(ae.current.clientWidth-he.current.clientWidth/2),L(ae.current.clientWidth-he.current.clientWidth/2)),ae.current&&B({width:ae.current.clientWidth,left:ae.current.offsetLeft}),le.current&&ue.current&&(G(le.current.clientWidth/2),K(ue.current.clientWidth/2))}),[]),i((function(){le.current&&ue.current&&$(c(le.current,ue.current||g.valueIndex===W.valueIndex&&null!==g.valueIndex&&null!==W.valueIndex))}),[F,J]),i((function(){"hover"===v?Z&&re?(E("visible"),k("hidden"),q("hidden")):ye===oe.current&&re?(k("visible"),E("hidden"),q("hidden")):ye===he.current&&re?(q("visible"),E("hidden"),k("hidden")):(k("hidden"),q("hidden"),E("hidden")):"always"===v&&(Z?(E("visible"),k("hidden"),q("hidden")):(E("hidden"),k("visible"),q("visible")))}),[Z]),i((function(){null!==M&&null!==C&&Ne&&B({left:M+Ne/2,width:C-M}),S&&ce.current&&U(S.left+S.width/2-ce.current.clientWidth/2),Be&&ke(Be)}),[Be]),i((function(){m({min:g.value,max:W.value,minIndex:g.valueIndex,maxIndex:W.valueIndex})}),[g.value,W.value]),i((function(){if(re&&Ie&&ye&&fe&&xe&&Ne&&null!==Le&&de.current&&null!==M&&null!==C){var e=(Le||0)+(ee-Ie),n=Math.round(e/(de.current.clientWidth/(x.length-1))),t=de.current.clientWidth/(x.length-1)*n-Ne/2;if(h){if(t>=fe&&t<=xe){if(ye===oe.current&&t>C)return;if(ye===he.current&&t<M)return;ye===oe.current&&N(t),ye===he.current&&L(t)}}else if(e>=fe&&e<=xe){if(ye===oe.current&&e>=C)return;if(ye===he.current&&e<=M)return;ye===oe.current&&N(e),ye===he.current&&L(e)}De(ye)}}),[ee]);var Re=function(e){if(e.preventDefault(),oe.current&&he.current&&Ne&&fe&&xe&&null!==M&&null!==C){var n=Math.abs(e.clientX-oe.current.getBoundingClientRect().left)>Math.abs(e.clientX-he.current.getBoundingClientRect().left)?he.current:oe.current;Ae(n.offsetLeft),console.log(n);var t=n.offsetLeft+(e.clientX-n.getBoundingClientRect().left)-Ne/2,r=Math.round(t/(de.current.clientWidth/(x.length-1))),i=de.current.clientWidth/(x.length-1)*r-Ne/2;if(h){if(i>=fe&&i<=xe){if(n===oe.current&&i>C)return;if(n===he.current&&i<M)return;n===oe.current&&N(i),n===he.current&&L(i)}}else if(t>=fe&&t<=xe){if(n===oe.current&&t>=C)return;if(n===he.current&&t<=M)return;n===oe.current&&N(t),n===he.current&&L(t)}De(n)}},ke=function(e){if(de.current&&ae.current&&e&&Ne){var n=de.current.clientWidth/x.length,t=Number(e.style.left.replace("px",""));t=(t=t>de.current.clientWidth?de.current.clientWidth:t)<=0?0:t;var r=Math.floor((t+Ne/2)/n);r>=x.length&&(r=x.length-1);var i=x.at(r)instanceof String?x.at(r):x.at(r).toString();e===oe.current&&y({value:i,valueIndex:r}),e===he.current&&I({value:i,valueIndex:r}),le.current&&ue.current&&(G(le.current.clientWidth/2),K(ue.current.clientWidth/2),$(c(le.current,ue.current)||g.valueIndex===W.valueIndex&&null!==g.valueIndex&&null!==W.valueIndex))}De(null)};return e("div",l({className:"slider-container"},{children:[n("div",l({className:"rail",ref:de,onClick:Re},{children:h&&x.map((function(e,t){return de.current&&t>0&&t<x.length-1&&n("div",{className:"step",style:{left:"".concat(de.current.clientWidth/(x.length-1)*t-2.5,"px")}},t)}))})),n("div",{className:"track",ref:ae,style:S?{left:"".concat(S.left,"px"),width:"".concat(S.width,"px")}:void 0,onMouseOver:function(){"hover"===v&&Z?(E("visible"),k("hidden"),q("hidden")):"hover"===v&&(E("hidden"),k("hidden"),q("hidden"))},onMouseOut:function(){("hover"===v&&Z||"hover"===v)&&(E("hidden"),k("hidden"),q("hidden"))},onClick:Re}),n("div",l({className:"min ball".concat(ye===oe.current?" active":""),style:{left:"".concat(M,"px")},ref:oe,onMouseOver:function(){"hover"!==v||Z?"hover"===v&&Z&&(k("hidden"),E("visible")):(k("visible"),E("hidden"))},onMouseOut:function(){"hover"!==v||Z?"hover"===v&&Z&&(k("hidden"),E("hidden")):(k("hidden"),E("hidden"))},onMouseDown:function(e){e.preventDefault(),we(ee),be(oe.current),Ae(M),ie(!0)}},{children:n("div",l({className:"tooltip ".concat(f||"over"),style:{visibility:R,marginLeft:"-".concat(F,"px")},ref:le},{children:n("p",l({className:"min-text-holder text-holder"},{children:g.value}))}))})),n("div",l({className:"mid tooltip ".concat(f||"over"),ref:ce,style:{visibility:j,left:"".concat(T,"px")}},{children:n("p",l({className:"mid-text-holder text-holder"},{children:g.value===W.value?"".concat(g.value):"".concat(g.value," - ").concat(W.value)}))})),n("div",l({className:"max ball".concat(ye===he.current?" active":""),style:{left:"".concat(C,"px")},ref:he,onMouseOver:function(){"hover"!==v||Z?"hover"===v&&Z&&(q("hidden"),E("visible")):(q("visible"),E("hidden"))},onMouseOut:function(){"hover"!==v||Z?"hover"===v&&Z&&(q("hidden"),E("hidden")):(q("hidden"),E("hidden"))},onMouseDown:function(e){e.preventDefault(),we(ee),be(he.current),Ae(C),ie(!0)}},{children:n("div",l({className:"tooltip ".concat(f||"over"),style:{visibility:V,marginLeft:"-".concat(J,"px")},ref:ue},{children:n("p",l({className:"max-text-holder text-holder"},{children:W.value}))}))}))]}))};export{u as RangeSlider};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as t,useRef as r,useEffect as i}from"react";var l=function(){return l=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},l.apply(this,arguments)},c=function(e,n){var t=e.getBoundingClientRect(),r=n.getBoundingClientRect();return!(t.top+t.height<r.top||t.top>r.top+r.height||t.left+t.width<r.left||t.left>r.left+r.width)},u=function(u){var d=u.hasSteps,a=u.tooltipVisibility,o=u.tooltipPosition,h=u.value,v=u.onChange,f=u.from,s=u.to,m=u.formatter,x=h instanceof Array?h:Array.from(function(e,n,t){return Array.from(Array.from(Array(Math.ceil((n-e)/t)).keys()),(function(n){return e+n*t}))}(h.min,h.max+1,1)),p=f?-1===x.indexOf(f)?0:x.indexOf(f):0,g=s?-1===x.indexOf(s)?x.length-1:x.indexOf(s):x.length-1,W=m||function(e){return"".concat(e)},y=t({value:W(x.at(p)),valueIndex:p}),b=y[0],I=y[1],w=t({value:W(x.at(g)),valueIndex:g}),M=w[0],N=w[1];a||(a="always");var O=t(null),C=O[0],L=O[1],A=t(null),B=A[0],D=A[1],R=t(null),k=R[0],X=R[1],j=t("always"===a?"visible":"hidden"),S=j[0],E=j[1],P=t("hidden"),V=P[0],q=P[1],z=t("always"===a?"visible":"hidden"),F=z[0],G=z[1],H=t(null),J=H[0],K=H[1],Q=t(null),T=Q[0],U=Q[1],Y=t(null),Z=Y[0],$=Y[1],_=t(!1),ee=_[0],ne=_[1],te=t(0),re=te[0],ie=te[1],le=t(!1),ce=le[0],ue=le[1],de=r(null),ae=r(null),oe=r(null),he=r(null),ve=r(null),fe=r(null),se=r(null),me=t(null),xe=me[0],pe=me[1],ge=t(null),We=ge[0],ye=ge[1],be=t(null),Ie=be[0],we=be[1],Me=t(null),Ne=Me[0],Oe=Me[1],Ce=t(null),Le=Ce[0],Ae=Ce[1],Be=t(null),De=Be[0],Re=Be[1],ke=t(null),Xe=ke[0],je=ke[1];i((function(){document.addEventListener("mousemove",(function(e){ie(e.clientX)})),document.addEventListener("mouseup",(function(e){Oe(null),ue(!1),"hover"===a&&(E("hidden"),G("hidden"),q("hidden"))})),he.current&&se.current&&(D(he.current.clientWidth-se.current.clientWidth/2),Ae(se.current.clientWidth)),fe.current&&(pe(fe.current.clientWidth/-2),L(he.current.clientWidth/(x.length-1)*p-fe.current.clientWidth/2)),se.current&&ve.current&&(ye(ve.current.clientWidth-se.current.clientWidth/2),D(he.current.clientWidth/(x.length-1)*g-se.current.clientWidth/2));var e=he.current.clientWidth/(x.length-1)*g-he.current.clientWidth/(x.length-1)*p,n=he.current.clientWidth/(x.length-1)*p;ve.current&&X({width:e,left:n}),de.current&&oe.current&&(K(de.current.clientWidth/2),U(oe.current.clientWidth/2)),ae.current&&$(n+e/2-ae.current.clientWidth/2)}),[]),i((function(){de.current&&oe.current&&ne(c(de.current,oe.current||b.valueIndex===M.valueIndex&&null!==b.valueIndex&&null!==M.valueIndex))}),[J,T]),i((function(){"hover"===a?ee&&ce?(q("visible"),E("hidden"),G("hidden")):Ie===fe.current&&ce?(E("visible"),q("hidden"),G("hidden")):Ie===se.current&&ce?(G("visible"),q("hidden"),E("hidden")):(E("hidden"),G("hidden"),q("hidden")):"always"===a&&(ee?(q("visible"),E("hidden"),G("hidden")):(q("hidden"),E("visible"),G("visible")))}),[ee]),i((function(){null!==C&&null!==B&&Le&&X({left:C+Le/2,width:B-C}),k&&ae.current&&$(k.left+k.width/2-ae.current.clientWidth/2),Xe&&Ee(Xe)}),[Xe]),i((function(){v({min:b.value,max:M.value,minIndex:b.valueIndex,maxIndex:M.valueIndex})}),[b.value,M.value]),i((function(){if(ce&&Ne&&Ie&&xe&&We&&Le&&null!==De&&he.current&&null!==C&&null!==B){var e=(De||0)+(re-Ne),n=Math.round(e/(he.current.clientWidth/(x.length-1))),t=he.current.clientWidth/(x.length-1)*n-Le/2;if(d){if(t>=xe&&t<=We){if(Ie===fe.current&&t>B)return;if(Ie===se.current&&t<C)return;Ie===fe.current&&L(t),Ie===se.current&&D(t)}}else if(e>=xe&&e<=We){if(Ie===fe.current&&e>=B)return;if(Ie===se.current&&e<=C)return;Ie===fe.current&&L(e),Ie===se.current&&D(e)}je(Ie)}}),[re]);var Se=function(e){if(e.preventDefault(),fe.current&&se.current&&Le&&xe&&We&&null!==C&&null!==B){var n=Math.abs(e.clientX-fe.current.getBoundingClientRect().left)>Math.abs(e.clientX-se.current.getBoundingClientRect().left)?se.current:fe.current;Re(n.offsetLeft),console.log(n);var t=n.offsetLeft+(e.clientX-n.getBoundingClientRect().left)-Le/2,r=Math.round(t/(he.current.clientWidth/(x.length-1))),i=he.current.clientWidth/(x.length-1)*r-Le/2;if(d){if(i>=xe&&i<=We){if(n===fe.current&&i>B)return;if(n===se.current&&i<C)return;n===fe.current&&L(i),n===se.current&&D(i)}}else if(t>=xe&&t<=We){if(n===fe.current&&t>=B)return;if(n===se.current&&t<=C)return;n===fe.current&&L(t),n===se.current&&D(t)}je(n)}},Ee=function(e){if(he.current&&ve.current&&e&&Le){var n=he.current.clientWidth/x.length,t=Number(e.style.left.replace("px",""));t=(t=t>he.current.clientWidth?he.current.clientWidth:t)<=0?0:t;var r=Math.floor((t+Le/2)/n);r>=x.length&&(r=x.length-1);var i=x.at(r)instanceof String?x.at(r):x.at(r).toString();e===fe.current&&I({value:W(i),valueIndex:r}),e===se.current&&N({value:W(i),valueIndex:r}),de.current&&oe.current&&(K(de.current.clientWidth/2),U(oe.current.clientWidth/2),ne(c(de.current,oe.current)||b.valueIndex===M.valueIndex&&null!==b.valueIndex&&null!==M.valueIndex))}je(null)};return e("div",l({className:"slider-container"},{children:[n("div",l({className:"rail",ref:he,onClick:Se},{children:d&&x.map((function(e,t){return he.current&&t>0&&t<x.length-1&&n("div",{className:"step",style:{left:"".concat(he.current.clientWidth/(x.length-1)*t-2.5,"px")}},t)}))})),n("div",{className:"track",ref:ve,style:k?{left:"".concat(k.left,"px"),width:"".concat(k.width,"px")}:void 0,onMouseOver:function(){"hover"===a&&ee?(q("visible"),E("hidden"),G("hidden")):"hover"===a&&(q("hidden"),E("hidden"),G("hidden"))},onMouseOut:function(){("hover"===a&&ee||"hover"===a)&&(q("hidden"),E("hidden"),G("hidden"))},onClick:Se}),n("div",l({className:"min ball".concat(Ie===fe.current?" active":""),style:{left:"".concat(C,"px")},ref:fe,onMouseOver:function(){"hover"!==a||ee?"hover"===a&&ee&&(E("hidden"),q("visible")):(E("visible"),q("hidden"))},onMouseOut:function(){"hover"!==a||ee?"hover"===a&&ee&&(E("hidden"),q("hidden")):(E("hidden"),q("hidden"))},onMouseDown:function(e){e.preventDefault(),Oe(re),we(fe.current),Re(C),ue(!0)}},{children:n("div",l({className:"tooltip ".concat(o||"over"),style:{visibility:S,marginLeft:"-".concat(J,"px")},ref:de},{children:n("p",l({className:"min-text-holder text-holder"},{children:b.value}))}))})),n("div",l({className:"mid tooltip ".concat(o||"over"),ref:ae,style:{visibility:V,left:"".concat(Z,"px")}},{children:n("p",l({className:"mid-text-holder text-holder"},{children:b.value===M.value?"".concat(b.value):"".concat(b.value," - ").concat(M.value)}))})),n("div",l({className:"max ball".concat(Ie===se.current?" active":""),style:{left:"".concat(B,"px")},ref:se,onMouseOver:function(){"hover"!==a||ee?"hover"===a&&ee&&(G("hidden"),q("visible")):(G("visible"),q("hidden"))},onMouseOut:function(){"hover"!==a||ee?"hover"===a&&ee&&(G("hidden"),q("hidden")):(G("hidden"),q("hidden"))},onMouseDown:function(e){e.preventDefault(),Oe(re),we(se.current),Re(B),ue(!0)}},{children:n("div",l({className:"tooltip ".concat(o||"over"),style:{visibility:F,marginLeft:"-".concat(T,"px")},ref:oe},{children:n("p",l({className:"max-text-holder text-holder"},{children:M.value}))}))}))]}))};export{u as RangeSlider};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -12,2 +12,5 @@ import React from 'react';
     value: Simple | any[];
+    from?: number | string;
+    to?: number | string;
+    formatter?: (value: number | string) => string;
     onChange: (x: any) => void;
@@ -14,0 +17,0 @@ }

package.json

 {
   "name": "react-double-range-slider",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Range slider component for React 18",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -70,6 +70,11 @@ <!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
     </li>
-    <!-- <li><a href="#usage">Usage</a></li>
-    <li><a href="#roadmap">Roadmap</a></li> -->
+    <li>
+      <a href="#usage">Usage</a>
+      <ul>
+          <li><a href="#props">Props</a></li>
+      </ul>
+    </li>
+    <!-- <li><a href="#roadmap">Roadmap</a></li> -->
     <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
+    <!-- <li><a href="#license">License</a></li> -->
     <li><a href="#contact">Contact</a></li>
@@ -141,5 +146,7 @@ <!-- <li><a href="#acknowledgments">Acknowledgments</a></li> -->
 
-To use this component you have to import default from library. Additionally it is recommended to also import default styles from
+To use this component you have to import default from library. Additionally it is recommended to also import default styles.
 
-"react-double-range-slider/dist/cjs/index.css"
+```js
+import "react-double-range-slider/dist/cjs/index.css";
+```
 
@@ -152,2 +159,17 @@ This will probably change in the future to improve user experience.
 
+## Props
+
+| Name              | Type                                               | Required | Default                                                                               | Description                                     |
+| ----------------- | -------------------------------------------------- | -------- | ------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| value             | {min: `number`, max: `number`} \| Array [`String`] | Yes      | ` `                                                                                   | Values used in array                            |
+| onChange          | (x: `any`) => `void`;                              | Yes      | (x: `any`)=> { min: `string`, max: `string`, minIndex: `number`, maxIndex: `number` } | Callback function called when the value changes |
+| formatter         | (value: `number` \| `string`) => `string`;         | No       | (value) => value;                                                                     | Function used to change label format            |
+| from              | `number` \| `string`                               | No       | 0                                                                                     | Default start position                          |
+| to                | `number` \| `string`                               | No       | 0                                                                                     | Default end position                            |
+| tooltipVisibility | `"always"` \| `"hover"` \| `"never"`               | No       | `"always"`                                                                            | Tooltip display type                            |
+| tooltipPosition   | `"under"` \| `"over"`                              | No       | `"over"`                                                                              | Tooltip position                                |
+| hasSteps          | `boolean `                                         | No       | `false`                                                                               | Determines if slider should have steps          |
+
+</br><p align="right">(<a href="#readme-top">back to top</a>)</p>
+
 <!-- ROADMAP -->
@@ -185,7 +207,7 @@ <!--
 
-## License
+<!-- ## License
 
 Distributed under the MIT License. See `LICENSE.txt` for more information.
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+<p align="right">(<a href="#readme-top">back to top</a>)</p> -->
 
@@ -192,0 +214,0 @@ <!-- CONTACT -->

No alert changes

Improved metrics

Total package byte prevSize

89398

increased by4.94%

Lines of code

359

increased by2.57%

Number of lines in readme file

264

increased by9.09%

No dependency changes