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

Comparing version 1.8.2 to 2.0.0

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

 import React from "react";
-import "./RangeSlider.scss";
-import { RangeSliderProps } from "./RangeSlider.types";
-declare const RangeSlider: React.FC<RangeSliderProps>;
+import { RangeSliderProps, ExposeElements } from "./RangeSlider.types";
+export interface IStep {
+    left: number;
+}
+export interface ITrack {
+    track: {
+        width: number;
+        left: number;
+    } | null;
+    railWidth: number;
+}
+export interface IBall {
+    isActive: boolean;
+    leftOffset: number;
+}
+export interface ITooltip {
+    tooltipPosition: "under" | "over" | undefined;
+    visibility: "visible" | "hidden";
+}
+export interface ITooltipMid {
+    leftOffset: number | null;
+}
+declare const RangeSlider: React.FC<RangeSliderProps> & Partial<ExposeElements>;
 export default RangeSlider;

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

 /// <reference types="react" />
+import "./RangeSlider.scss";
 declare const _default: {
@@ -3,0 +4,0 @@ title: string;

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

@@ -0,1 +1,3 @@
+import { StyledComponent } from "styled-components";
+import { IBall, IStep, ITooltip, ITooltipMid, ITrack } from "./RangeSlider";
 export interface Simple {
@@ -18,2 +20,4 @@ min: number;
     to?: number | string;
+    customTheme?: Partial<Theme>;
+    className?: string;
     formatter?: (value: number | string) => string;
@@ -26,1 +30,25 @@ onChange: (value: Output) => void;
 }
+export interface Theme {
+    primaryColor: string;
+    secondaryColor: string;
+    highlightColor: string;
+    sliderLength: number;
+    ballSize: 25;
+}
+export interface ExposeElements {
+    container: StyledComponent<"div", any, {}, never>;
+    rail: StyledComponent<"div", any, {}, never>;
+    step: StyledComponent<"div", any, IStep, never>;
+    track: StyledComponent<"div", any, ITrack, never>;
+    textHolder: StyledComponent<"p", any, {}, never>;
+    textHolderMin: StyledComponent<"p", any, {}, never>;
+    textHolderMid: StyledComponent<"p", any, {}, never>;
+    textHolderMax: StyledComponent<"p", any, {}, never>;
+    tooltip: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMin: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMid: StyledComponent<"div", any, ITooltip & ITooltipMid, never>;
+    tooltipMax: StyledComponent<"div", any, ITooltip, never>;
+    ball: StyledComponent<"div", any, IBall, never>;
+    ballMin: StyledComponent<"div", any, IBall, never>;
+    ballMax: StyledComponent<"div", any, IBall, never>;
+}

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");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t),i=function(){return i=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},i.apply(this,arguments)};exports.RangeSlider=function(n){var l,u,c,d=n.hasSteps,o=n.tooltipVisibility,a=n.tooltipPosition,s=n.value,h=n.onChange,f=n.from,v=n.to,g=n.formatter,b=s instanceof Array?s:Array.from(function(e,t,n){return Array.from(Array.from(Array(Math.ceil((t-e)/n)).keys()),(function(t){return e+t*n}))}(s.min,s.max+1,1)),m=f?-1===b.indexOf(f)?0:b.indexOf(f):0,x=v?-1===b.indexOf(v)?b.length-1:b.indexOf(v):b.length-1,p=g||function(e){return"".concat(e)},W=t.useState({value:p(b[m]),valueIndex:m}),y=W[0],S=W[1],w=t.useState({value:p(b[x]),valueIndex:x}),M=w[0],j=w[1];o||(o="always");var O=t.useState(null),C=O[0],N=O[1],R=t.useState(null),E=R[0],I=R[1],L=t.useState(null),A=L[0],k=L[1],X=t.useState("always"===o?"visible":"hidden"),B=X[0],P=X[1],q=t.useState("hidden"),z=q[0],D=q[1],K=t.useState("always"===o?"visible":"hidden"),T=K[0],_=K[1],F=t.useState(null),V=F[0],G=F[1],H=t.useState(!1),J=H[0],Q=H[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),de=t.useRef(null),oe=t.useState(null),ae=oe[0],se=oe[1],he=t.useState(null),fe=he[0],ve=he[1],ge=t.useState(null),be=ge[0],me=ge[1],xe=t.useState(null),pe=xe[0],We=xe[1],ye=t.useState(null),Se=ye[0],we=ye[1],Me=t.useState(null),je=Me[0],Oe=Me[1],Ce=t.useState({value:null,action:""}),Ne=Ce[0],Re=Ce[1],Ee=t.useRef(!0),Ie=t.useState(0),Le=Ie[0],Ae=Ie[1],ke=r.default.useRef(null);function Xe(){le.current&&de.current&&(I(le.current.clientWidth-de.current.clientWidth/2),we(de.current.clientWidth)),ce.current&&(se(ce.current.clientWidth/-2),N(le.current.clientWidth/(b.length-1)*m-ce.current.clientWidth/2)),de.current&&ue.current&&(ve(ue.current.clientWidth-de.current.clientWidth/2),I(le.current.clientWidth/(b.length-1)*x-de.current.clientWidth/2));var e=le.current.clientWidth/(b.length-1)*x-le.current.clientWidth/(b.length-1)*m,t=le.current.clientWidth/(b.length-1)*m;ue.current&&k({width:e,left:t}),re.current&&G((t+e/2-re.current.clientWidth/2)/le.current.clientWidth*100);var n=window.getComputedStyle(ne.current).transform,r=parseInt(window.getComputedStyle(ne.current).width),i=new WebKitCSSMatrix(n),l=Math.round(10*i.m41)/20/r*100,u=window.getComputedStyle(ie.current).transform,c=parseInt(window.getComputedStyle(ie.current).width),d=new WebKitCSSMatrix(u),o=Math.round(10*d.m41)/20/c*100;Ae(isFinite(1/(Math.floor((l-o)/10)/10+1))?1/(Math.floor((l-o)/10)/10+1):0),ne.current&&ie.current&&ue.current&&Q(ne.current.clientWidth/2+ie.current.clientWidth/2>e*Le)}function Be(){ke.current&&h(ke.current),We(null),te(!1),"hover"===o&&(P("hidden"),_("hidden"),D("hidden"))}function Pe(){Xe()}t.useEffect((function(){return document.addEventListener("mousemove",(function(e){Z(e.clientX)})),window.addEventListener("resize",Pe),Xe(),Re({value:null,action:""}),function(){window.removeEventListener("resize",Pe)}}),[]),t.useEffect((function(){Ee.current||(null!==C&&null!==E&&Se&&k({left:C+Se/2,width:E-C}),A&&re.current&&G((A.left+A.width/2-re.current.clientWidth/2)/le.current.clientWidth*100),Ne.value&&ze(Ne.value),ne.current&&ie.current&&ue.current&&Q(ne.current.clientWidth/2+ie.current.clientWidth/2>ue.current.clientWidth*Le))}),[Ne]),t.useEffect((function(){Ee.current?Ee.current=!1:(ke.current={min:y.value,max:M.value,minIndex:y.valueIndex,maxIndex:M.valueIndex},"jumpTo"===Ne.action&&h(ke.current))}),[y.value,M.value]),t.useEffect((function(){"hover"===o?J&&ee?(D("visible"),P("hidden"),_("hidden")):be===ce.current&&ee?(P("visible"),D("hidden"),_("hidden")):be===de.current&&ee?(_("visible"),D("hidden"),P("hidden")):(P("hidden"),_("hidden"),D("hidden")):"always"===o&&(J?(D("visible"),P("hidden"),_("hidden")):(D("hidden"),P("visible"),_("visible")))}),[J]),t.useEffect((function(){if(ee&&pe&&be&&ae&&fe&&Se&&null!==je&&le.current&&null!==C&&null!==E){var e=(je||0)+(Y-pe),t=Math.round(e/(le.current.clientWidth/(b.length-1))),n=le.current.clientWidth/(b.length-1)*t-Se/2;if(d){if(n>=ae&&n<=fe){if(be===ce.current&&n>E)return;if(be===de.current&&n<C)return;be===ce.current&&N(n),be===de.current&&I(n)}}else if(e>=ae&&e<=fe){if(be===ce.current&&e>=E)return;if(be===de.current&&e<=C)return;be===ce.current&&N(e),be===de.current&&I(e)}Re({value:be,action:"move"})}}),[Y]);var qe=function(e){if(ce.current&&de.current&&Se&&ae&&fe&&null!==C&&null!==E){var t=Math.abs(e.clientX-ce.current.getBoundingClientRect().left)>Math.abs(e.clientX-de.current.getBoundingClientRect().left)?de.current:ce.current;Oe(t.offsetLeft);var n=t.offsetLeft+(e.clientX-t.getBoundingClientRect().left)-Se/2,r=Math.round(n/(le.current.clientWidth/(b.length-1))),i=le.current.clientWidth/(b.length-1)*r-Se/2;if(d){if(i>=ae&&i<=fe){if(t===ce.current&&i>E)return;if(t===de.current&&i<C)return;t===ce.current&&N(i),t===de.current&&I(i)}}else if(n>=ae&&n<=fe){if(t===ce.current&&n>=E)return;if(t===de.current&&n<=C)return;t===ce.current&&N(n),t===de.current&&I(n)}Re({value:t,action:"jumpTo"})}},ze=function(e){if(le.current&&ue.current&&e&&Se){var t=le.current.clientWidth/b.length,n=Number(window.getComputedStyle(e).left.replace("px",""));n=(n=n>le.current.clientWidth?le.current.clientWidth+Se/2:n+Se/2)<=0?0:n;var r=Math.floor(n/t);r>=b.length&&(r=b.length-1);var l="string"==typeof b[r]?b[r]:b[r].toString();e===ce.current&&S({value:p(l),valueIndex:r}),e===de.current&&j({value:p(l),valueIndex:r})}Re(i(i({},Ne),{value:null}))};return e.jsxs("div",i({className:"double-range-slider-container"},{children:[e.jsx("div",i({className:"double-range-slider-rail",ref:le,onClick:qe},{children:d&&b.map((function(t,n){return le.current&&n>0&&n<b.length-1&&e.jsx("div",{className:"double-range-slider-step",style:{left:"".concat(le.current.clientWidth/(b.length-1)*n-2.5,"px")}},n)}))})),e.jsx("div",{className:"double-range-slider-track",ref:ue,style:A?{left:"".concat(A.left/(null===(l=le.current)||void 0===l?void 0:l.clientWidth)*100,"%"),width:"".concat(A.width,"px")}:void 0,onMouseOver:function(){"hover"===o&&J?(D("visible"),P("hidden"),_("hidden")):"hover"===o&&(D("hidden"),P("hidden"),_("hidden"))},onMouseOut:function(){("hover"===o&&J||"hover"===o)&&(D("hidden"),P("hidden"),_("hidden"))},onClick:qe}),e.jsx("div",i({className:"double-range-slider-min double-range-slider-ball".concat(be===ce.current?" double-range-slider-active":""),style:{left:"".concat(C/(null===(u=le.current)||void 0===u?void 0:u.clientWidth)*100,"%")},ref:ce,onMouseOver:function(){"hover"!==o||J?"hover"===o&&J&&(P("hidden"),D("visible")):(P("visible"),D("hidden"))},onMouseOut:function(){"hover"!==o||J?"hover"===o&&J&&(P("hidden"),D("hidden")):(P("hidden"),D("hidden"))},onMouseDown:function(e){We(Y),me(ce.current),Oe(C),te(!0),document.addEventListener("mouseup",Be,{once:!0})}},{children:e.jsx("div",i({className:"double-range-slider-tooltip ".concat(a?"double-range-slider-".concat(a):"double-range-slider-over"),style:{visibility:B},ref:ne},{children:e.jsx("p",i({className:"double-range-slider-min-text-holder double-range-slider-text-holder"},{children:y.value}))}))})),e.jsx("div",i({className:"double-range-slider-mid double-range-slider-tooltip ".concat(a?"double-range-slider-".concat(a):"double-range-slider-over"),ref:re,style:{visibility:z,left:"".concat(V,"%")}},{children:e.jsx("p",i({className:"double-range-slider-mid-text-holder double-range-slider-text-holder"},{children:y.value===M.value?"".concat(y.value):"".concat(y.value," - ").concat(M.value)}))})),e.jsx("div",i({className:"double-range-slider-max double-range-slider-ball".concat(be===de.current?" double-range-slider-active":""),style:{left:"".concat(E/(null===(c=le.current)||void 0===c?void 0:c.clientWidth)*100,"%")},ref:de,onMouseOver:function(){"hover"!==o||J?"hover"===o&&J&&(_("hidden"),D("visible")):(_("visible"),D("hidden"))},onMouseOut:function(){"hover"!==o||J?"hover"===o&&J&&(_("hidden"),D("hidden")):(_("hidden"),D("hidden"))},onMouseDown:function(e){We(Y),me(de.current),Oe(E),te(!0),document.addEventListener("mouseup",Be,{once:!0})}},{children:e.jsx("div",i({className:"double-range-slider-tooltip ".concat(a?"double-range-slider-".concat(a):"double-range-slider-over"),style:{visibility:T},ref:ie},{children:e.jsx("p",i({className:"double-range-slider-max-text-holder double-range-slider-text-holder"},{children:M.value}))}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(n),l=r(t),o=function(){return o=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},o.apply(this,arguments)};function u(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var d,a,c,s,f,h,p,x,v,b,g,m,w,y,S,W=l.default.div(d||(d=u(["\n    position: relative;\n    font-size: 16px;\n    color: #fff;\n    width: 400px;\n    height: 100%;\n    //top right bottom left\n    margin: 150px 50px 200px 50px;\n"],["\n    position: relative;\n    font-size: 16px;\n    color: #fff;\n    width: 400px;\n    height: 100%;\n    //top right bottom left\n    margin: 150px 50px 200px 50px;\n"]))),M=l.default.div(a||(a=u(["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    z-index: 0;\n"],["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    z-index: 0;\n"])),(function(e){return e.theme.secondaryColor}),(function(e){return e.theme.sliderLength})),C=l.default.div(c||(c=u(["\n    position: absolute;\n    z-index: 1;\n    height: 10px;\n    width: 5px;\n    border-radius: 30px;\n    background-color: ",";\n    left: ","px;\n"],["\n    position: absolute;\n    z-index: 1;\n    height: 10px;\n    width: 5px;\n    border-radius: 30px;\n    background-color: ",";\n    left: ","px;\n"])),(function(e){return e.theme.highlightColor}),(function(e){return e.left})),O=l.default.div(s||(s=u(["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    position: absolute;\n    top: 0px;\n    left: ","%;\n    width: ","px;\n"],["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    position: absolute;\n    top: 0px;\n    left: ","%;\n    width: ","px;\n"])),(function(e){return e.theme.primaryColor}),(function(e){return e.theme.sliderLength}),(function(e){var n=e.track,t=e.railWidth;return((null==n?void 0:n.left)||0/t)/4}),(function(e){var n=e.track;return null==n?void 0:n.width})),k=l.default.p(f||(f=u(["\n    -webkit-touch-callout: none; // iOS Safari\n    -webkit-user-select: none; // Safari\n    -khtml-user-select: none; // Konqueror HTML\n    -moz-user-select: none; // Old versions of Firefox\n    -ms-user-select: none; // Internet Explorer/Edge\n    user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox\n    white-space: nowrap;\n"],["\n    -webkit-touch-callout: none; // iOS Safari\n    -webkit-user-select: none; // Safari\n    -khtml-user-select: none; // Konqueror HTML\n    -moz-user-select: none; // Old versions of Firefox\n    -ms-user-select: none; // Internet Explorer/Edge\n    user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox\n    white-space: nowrap;\n"]))),j=l.default(k)(h||(h=u([""],[""]))),z=l.default(k)(p||(p=u([""],[""]))),N=l.default(k)(x||(x=u([""],[""]))),P=l.default.div(v||(v=u(["\n    background-color: ",";\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    height: 20px;\n    width: auto;\n    color: #fff;\n    text-align: center;\n    border-radius: 6px;\n    padding: 15px 20px;\n    flex-wrap: nowrap;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n    visibility: ",";\n    ",'\n\n    &:after {\n        content: " ";\n        position: absolute;\n        margin-left: var(--after-margin-left, -10px);\n        border-width: 10px;\n        border-style: solid;\n        pointer-events: none;\n        left: var(--after-left, 50%);\n        ',"\n    }\n"],["\n    background-color: ",";\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    height: 20px;\n    width: auto;\n    color: #fff;\n    text-align: center;\n    border-radius: 6px;\n    padding: 15px 20px;\n    flex-wrap: nowrap;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n    visibility: ",";\n    ",'\n\n    &:after {\n        content: " ";\n        position: absolute;\n        margin-left: var(--after-margin-left, -10px);\n        border-width: 10px;\n        border-style: solid;\n        pointer-events: none;\n        left: var(--after-left, 50%);\n        ',"\n    }\n"])),(function(e){return e.theme.primaryColor}),(function(e){return e.visibility}),(function(e){var n=e.tooltipPosition,t=e.theme.ballSize;return"under"===n?"top: ".concat(t/2+35,"px;"):"bottom: ".concat(t/2+35,"px;")}),(function(e){var n=e.tooltipPosition,t=e.theme.primaryColor;return"under"===n?"\n                    border-color: transparent transparent ".concat(t," transparent;\n                    bottom: 100%; /* At the top of the tooltip */\n                "):"\n                    border-color: ".concat(t," transparent transparent transparent;\n                    top: 100%; /* At the bottom of the tooltip */\n                ")})),E=l.default(P)(b||(b=u([""],[""]))),R=l.default(P)(g||(g=u(["\n    bottom: ","px;\n    left: ","%;\n"],["\n    bottom: ","px;\n    left: ","%;\n"])),(function(e){return e.theme.ballSize/2+25}),(function(e){return e.leftOffset})),L=l.default(P)(m||(m=u([""],[""]))),I=l.default.div(w||(w=u(["\n    background-color: ",";\n    outline: "," 5px solid;\n    z-index: 2;\n    width: ","px;\n    height: ","px;\n    border-radius: 50%;\n    position: absolute;\n    top: ","px;\n    left: ","%;\n    ","\n\n    "," {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n"],["\n    background-color: ",";\n    outline: "," 5px solid;\n    z-index: 2;\n    width: ","px;\n    height: ","px;\n    border-radius: 50%;\n    position: absolute;\n    top: ","px;\n    left: ","%;\n    ","\n\n    "," {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n"])),(function(e){return e.theme.highlightColor}),(function(e){return e.theme.primaryColor}),(function(e){return e.theme.ballSize}),(function(e){return e.theme.ballSize}),(function(e){return-5*(e.theme.ballSize-10)/10}),(function(e){return e.leftOffset}),(function(e){return e.isActive?"z-index: 4;":""}),P),A=l.default(I)(y||(y=u([""],[""]))),H=l.default(I)(S||(S=u([""],[""]))),T={primaryColor:"#f3bc3e",secondaryColor:"#8c8c8c",highlightColor:"#f5f5f5",sliderLength:400,ballSize:25},X=function(r){var l,u,d,a=r.hasSteps,c=r.tooltipVisibility,s=r.tooltipPosition,f=r.value,h=r.onChange,p=r.from,x=r.to,v=r.formatter,b=r.customTheme,g=r.className,m=f instanceof Array?f:Array.from(function(e,n,t){return Array.from(Array.from(Array(Math.ceil((n-e)/t)).keys()),(function(n){return e+n*t}))}(f.min,f.max+1,1)),w=p?-1===m.indexOf(p)?0:m.indexOf(p):0,y=x?-1===m.indexOf(x)?m.length-1:m.indexOf(x):m.length-1,S=v||function(e){return"".concat(e)},k=n.useState({value:S(m[w]),valueIndex:w}),P=k[0],I=k[1],X=n.useState({value:S(m[y]),valueIndex:y}),q=X[0],F=X[1];c||(c="always");var K=n.useState(null),B=K[0],D=K[1],_=n.useState(null),V=_[0],G=_[1],J=n.useState(null),Q=J[0],U=J[1],Y=n.useState("always"===c?"visible":"hidden"),Z=Y[0],$=Y[1],ee=n.useState("hidden"),ne=ee[0],te=ee[1],re=n.useState("always"===c?"visible":"hidden"),ie=re[0],le=re[1],oe=n.useState(null),ue=oe[0],de=oe[1],ae=n.useState(!1),ce=ae[0],se=ae[1],fe=n.useState(0),he=fe[0],pe=fe[1],xe=n.useState(!1),ve=xe[0],be=xe[1],ge=n.useRef(null),me=n.useRef(null),we=n.useRef(null),ye=n.useRef(null),Se=n.useRef(null),We=n.useRef(null),Me=n.useRef(null),Ce=n.useRef(null),Oe=n.useState(null),ke=Oe[0],je=Oe[1],ze=n.useState(null),Ne=ze[0],Pe=ze[1],Ee=n.useState(null),Re=Ee[0],Le=Ee[1],Ie=n.useState(null),Ae=Ie[0],He=Ie[1],Te=n.useState(null),Xe=Te[0],qe=Te[1],Fe=n.useState(null),Ke=Fe[0],Be=Fe[1],De=n.useState({value:null,action:""}),_e=De[0],Ve=De[1],Ge=n.useRef(!0),Je=n.useState(0),Qe=Je[0],Ue=Je[1],Ye=i.default.useRef(null);function Ze(){Se.current&&Ce.current&&(G(Se.current.clientWidth-Ce.current.clientWidth/2),qe(Ce.current.clientWidth)),Me.current&&(je(Me.current.clientWidth/-2),D(Se.current.clientWidth/(m.length-1)*w-Me.current.clientWidth/2)),Ce.current&&We.current&&(Pe(We.current.clientWidth-Ce.current.clientWidth/2),G(Se.current.clientWidth/(m.length-1)*y-Ce.current.clientWidth/2));var e=Se.current.clientWidth/(m.length-1)*y-Se.current.clientWidth/(m.length-1)*w,n=Se.current.clientWidth/(m.length-1)*w;We.current&&U({width:e,left:n}),we.current&&de((n+e/2-we.current.clientWidth/2)/Se.current.clientWidth*100);var t=window.getComputedStyle(me.current).transform,r=parseInt(window.getComputedStyle(me.current).width),i=new WebKitCSSMatrix(t),l=Math.round(10*i.m41)/20/r*100,o=window.getComputedStyle(ye.current).transform,u=parseInt(window.getComputedStyle(ye.current).width),d=new WebKitCSSMatrix(o),a=Math.round(10*d.m41)/20/u*100;Ue(isFinite(1/(Math.floor((l-a)/10)/10+1))?1/(Math.floor((l-a)/10)/10+1):0),me.current&&ye.current&&We.current&&se(me.current.clientWidth/2+ye.current.clientWidth/2>e*Qe)}function $e(){Ye.current&&h(Ye.current),He(null),be(!1),"hover"===c&&($("hidden"),le("hidden"),te("hidden"))}function en(){Ze()}n.useEffect((function(){return document.addEventListener("mousemove",(function(e){pe(e.clientX)})),window.addEventListener("resize",en),Ze(),Ve({value:null,action:""}),function(){window.removeEventListener("resize",en)}}),[]),n.useEffect((function(){if(!Ge.current){if(null!==B&&null!==V&&Xe&&U({left:B+Xe/2,width:V-B}),Xe&&Q&&we.current&&ge.current){var e=Q.left+Q.width/2-we.current.clientWidth/2;e<-1*Number(window.getComputedStyle(ge.current).marginLeft.replace("px",""))-Xe?(e=-1*Number(window.getComputedStyle(ge.current).marginLeft.replace("px",""))-Xe,we.current.style.setProperty("--after-left","0"),we.current.style.setProperty("--after-margin-left","".concat(Q.left+Q.width/2,"px"))):e+we.current.clientWidth>ge.current.clientWidth+Number(window.getComputedStyle(ge.current).marginRight.replace("px",""))+Xe?(e=ge.current.clientWidth+Number(window.getComputedStyle(ge.current).marginRight.replace("px",""))-we.current.clientWidth+Xe,we.current.style.setProperty("--after-left","0"),we.current.style.setProperty("--after-margin-left","".concat(Q.left+Q.width/2-e-Xe,"px"))):(we.current.style.setProperty("--after-left","50%"),we.current.style.setProperty("--after-margin-left","-10px")),de(e/Se.current.clientWidth*100)}_e.value&&tn(_e.value),me.current&&ye.current&&We.current&&se(me.current.clientWidth/2+ye.current.clientWidth/2>We.current.clientWidth*Qe)}}),[_e]),n.useEffect((function(){Ge.current?Ge.current=!1:(Ye.current={min:P.value,max:q.value,minIndex:P.valueIndex,maxIndex:q.valueIndex},"jumpTo"===_e.action&&h(Ye.current))}),[P.value,q.value]),n.useEffect((function(){"hover"===c?ce&&ve?(te("visible"),$("hidden"),le("hidden")):Re===Me.current&&ve?($("visible"),te("hidden"),le("hidden")):Re===Ce.current&&ve?(le("visible"),te("hidden"),$("hidden")):($("hidden"),le("hidden"),te("hidden")):"always"===c&&(ce?(te("visible"),$("hidden"),le("hidden")):(te("hidden"),$("visible"),le("visible")))}),[ce]),n.useEffect((function(){if(ve&&Ae&&Re&&ke&&Ne&&Xe&&null!==Ke&&Se.current&&null!==B&&null!==V){var e=(Ke||0)+(he-Ae),n=Math.round(e/(Se.current.clientWidth/(m.length-1))),t=Se.current.clientWidth/(m.length-1)*n-Xe/2;if(a){if(t>=ke&&t<=Ne){if(Re===Me.current&&t>V)return;if(Re===Ce.current&&t<B)return;Re===Me.current&&D(t),Re===Ce.current&&G(t)}}else if(e>=ke&&e<=Ne){if(Re===Me.current&&e>=V)return;if(Re===Ce.current&&e<=B)return;Re===Me.current&&D(e),Re===Ce.current&&G(e)}Ve({value:Re,action:"move"})}}),[he]);var nn=function(e){if(Me.current&&Ce.current&&Xe&&ke&&Ne&&null!==B&&null!==V){var n=Math.abs(e.clientX-Me.current.getBoundingClientRect().left)>Math.abs(e.clientX-Ce.current.getBoundingClientRect().left)?Ce.current:Me.current;Be(n.offsetLeft);var t=n.offsetLeft+(e.clientX-n.getBoundingClientRect().left)-Xe/2,r=Math.round(t/(Se.current.clientWidth/(m.length-1))),i=Se.current.clientWidth/(m.length-1)*r-Xe/2;if(a){if(i>=ke&&i<=Ne){if(n===Me.current&&i>V)return;if(n===Ce.current&&i<B)return;n===Me.current&&D(i),n===Ce.current&&G(i)}}else if(t>=ke&&t<=Ne){if(n===Me.current&&t>=V)return;if(n===Ce.current&&t<=B)return;n===Me.current&&D(t),n===Ce.current&&G(t)}Ve({value:n,action:"jumpTo"})}},tn=function(e){if(Se.current&&We.current&&e&&Xe){var n=Se.current.clientWidth/m.length,t=Number(window.getComputedStyle(e).left.replace("px",""));t=(t=t>Se.current.clientWidth?Se.current.clientWidth+Xe/2:t+Xe/2)<=0?0:t;var r=Math.floor(t/n);r>=m.length&&(r=m.length-1);var i="string"==typeof m[r]?m[r]:m[r].toString();e===Me.current&&I({value:S(i),valueIndex:r}),e===Ce.current&&F({value:S(i),valueIndex:r})}Ve(o(o({},_e),{value:null}))};return e.jsx(t.ThemeProvider,o({theme:o(o({},T),b)},{children:e.jsxs(W,o({className:"double-range-slider-container ".concat(g||""),ref:ge},{children:[e.jsx(M,o({className:"double-range-slider-rail",ref:Se,onClick:nn},{children:a&&m.map((function(n,t){return Se.current&&t>0&&t<m.length-1&&e.jsx(C,{className:"double-range-slider-step",left:Se.current.clientWidth/(m.length-1)*t-2.5},t)}))})),e.jsx(O,{className:"double-range-slider-track",ref:We,track:Q,railWidth:null===(l=Se.current)||void 0===l?void 0:l.clientWidth,onMouseOver:function(){"hover"===c&&ce?(te("visible"),$("hidden"),le("hidden")):"hover"===c&&(te("hidden"),$("hidden"),le("hidden"))},onMouseOut:function(){("hover"===c&&ce||"hover"===c)&&(te("hidden"),$("hidden"),le("hidden"))},onClick:nn}),e.jsx(A,o({className:"double-range-slider-min double-range-slider-ball".concat(Re===Me.current?" double-range-slider-active":""),isActive:Re===Ce.current,leftOffset:B/(null===(u=Se.current)||void 0===u?void 0:u.clientWidth)*100,ref:Me,onMouseOver:function(){"hover"!==c||ce?"hover"===c&&ce&&($("hidden"),te("visible")):($("visible"),te("hidden"))},onMouseOut:function(){"hover"!==c||ce?"hover"===c&&ce&&($("hidden"),te("hidden")):($("hidden"),te("hidden"))},onMouseDown:function(e){He(he),Le(Me.current),Be(B),be(!0),document.addEventListener("mouseup",$e,{once:!0})}},{children:e.jsx(E,o({className:"double-range-slider-tooltip ".concat(s?"double-range-slider-".concat(s):"double-range-slider-over"),tooltipPosition:s,visibility:Z,ref:me},{children:e.jsx(j,o({className:"double-range-slider-text-holder double-range-slider-text-holder-min"},{children:P.value}))}))})),e.jsx(R,o({className:"double-range-slider-mid double-range-slider-tooltip ".concat(s?"double-range-slider-".concat(s):"double-range-slider-over"),tooltipPosition:s,visibility:ne,leftOffset:ue,ref:we},{children:e.jsx(z,o({className:"double-range-slider-text-holder double-range-slider-text-holder-mid"},{children:P.value===q.value?"".concat(P.value):"".concat(P.value," - ").concat(q.value)}))})),e.jsx(H,o({className:"double-range-slider-max double-range-slider-ball".concat(Re===Ce.current?" double-range-slider-active":""),isActive:Re===Ce.current,leftOffset:V/(null===(d=Se.current)||void 0===d?void 0:d.clientWidth)*100,ref:Ce,onMouseOver:function(){"hover"!==c||ce?"hover"===c&&ce&&(le("hidden"),te("visible")):(le("visible"),te("hidden"))},onMouseOut:function(){"hover"!==c||ce?"hover"===c&&ce&&(le("hidden"),te("hidden")):(le("hidden"),te("hidden"))},onMouseDown:function(e){He(he),Le(Ce.current),Be(V),be(!0),document.addEventListener("mouseup",$e,{once:!0})}},{children:e.jsx(L,o({className:"double-range-slider-tooltip ".concat(s?"double-range-slider-".concat(s):"double-range-slider-over"),tooltipPosition:s,visibility:ie,ref:ye},{children:e.jsx(N,o({className:"double-range-slider-text-holder double-range-slider-text-holder-max"},{children:q.value}))}))}))]}))}))};X.container=W,X.rail=M,X.step=C,X.track=O,X.textHolder=k,X.textHolderMin=j,X.textHolderMid=z,X.textHolderMax=N,X.tooltip=P,X.tooltipMin=E,X.tooltipMid=R,X.tooltipMax=L,X.ball=I,X.ballMin=A,X.ballMax=H,exports.RangeSlider=X;
 //# sourceMappingURL=index.js.map

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

 import React from "react";
-import "./RangeSlider.scss";
-import { RangeSliderProps } from "./RangeSlider.types";
-declare const RangeSlider: React.FC<RangeSliderProps>;
+import { RangeSliderProps, ExposeElements } from "./RangeSlider.types";
+export interface IStep {
+    left: number;
+}
+export interface ITrack {
+    track: {
+        width: number;
+        left: number;
+    } | null;
+    railWidth: number;
+}
+export interface IBall {
+    isActive: boolean;
+    leftOffset: number;
+}
+export interface ITooltip {
+    tooltipPosition: "under" | "over" | undefined;
+    visibility: "visible" | "hidden";
+}
+export interface ITooltipMid {
+    leftOffset: number | null;
+}
+declare const RangeSlider: React.FC<RangeSliderProps> & Partial<ExposeElements>;
 export default RangeSlider;

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

 /// <reference types="react" />
+import "./RangeSlider.scss";
 declare const _default: {
@@ -3,0 +4,0 @@ title: string;

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

@@ -0,1 +1,3 @@
+import { StyledComponent } from "styled-components";
+import { IBall, IStep, ITooltip, ITooltipMid, ITrack } from "./RangeSlider";
 export interface Simple {
@@ -18,2 +20,4 @@ min: number;
     to?: number | string;
+    customTheme?: Partial<Theme>;
+    className?: string;
     formatter?: (value: number | string) => string;
@@ -26,1 +30,25 @@ onChange: (value: Output) => void;
 }
+export interface Theme {
+    primaryColor: string;
+    secondaryColor: string;
+    highlightColor: string;
+    sliderLength: number;
+    ballSize: 25;
+}
+export interface ExposeElements {
+    container: StyledComponent<"div", any, {}, never>;
+    rail: StyledComponent<"div", any, {}, never>;
+    step: StyledComponent<"div", any, IStep, never>;
+    track: StyledComponent<"div", any, ITrack, never>;
+    textHolder: StyledComponent<"p", any, {}, never>;
+    textHolderMin: StyledComponent<"p", any, {}, never>;
+    textHolderMid: StyledComponent<"p", any, {}, never>;
+    textHolderMax: StyledComponent<"p", any, {}, never>;
+    tooltip: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMin: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMid: StyledComponent<"div", any, ITooltip & ITooltipMid, never>;
+    tooltipMax: StyledComponent<"div", any, ITooltip, never>;
+    ball: StyledComponent<"div", any, IBall, never>;
+    ballMin: StyledComponent<"div", any, IBall, never>;
+    ballMax: StyledComponent<"div", any, IBall, never>;
+}

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import t,{useState as r,useRef as i,useEffect as l}from"react";var u=function(){return u=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},u.apply(this,arguments)},d=function(d){var c,o,a,h=d.hasSteps,s=d.tooltipVisibility,v=d.tooltipPosition,f=d.value,g=d.onChange,m=d.from,b=d.to,p=d.formatter,W=f instanceof Array?f:Array.from(function(e,n,t){return Array.from(Array.from(Array(Math.ceil((n-e)/t)).keys()),(function(n){return e+n*t}))}(f.min,f.max+1,1)),w=m?-1===W.indexOf(m)?0:W.indexOf(m):0,x=b?-1===W.indexOf(b)?W.length-1:W.indexOf(b):W.length-1,y=p||function(e){return"".concat(e)},M=r({value:y(W[w]),valueIndex:w}),C=M[0],N=M[1],O=r({value:y(W[x]),valueIndex:x}),S=O[0],I=O[1];s||(s="always");var L=r(null),j=L[0],A=L[1],E=r(null),k=E[0],R=E[1],X=r(null),B=X[0],z=X[1],D=r("always"===s?"visible":"hidden"),K=D[0],P=D[1],T=r("hidden"),F=T[0],V=T[1],q=r("always"===s?"visible":"hidden"),G=q[0],H=q[1],J=r(null),Q=J[0],U=J[1],Y=r(!1),Z=Y[0],$=Y[1],_=r(0),ee=_[0],ne=_[1],te=r(!1),re=te[0],ie=te[1],le=i(null),ue=i(null),de=i(null),ce=i(null),oe=i(null),ae=i(null),he=i(null),se=r(null),ve=se[0],fe=se[1],ge=r(null),me=ge[0],be=ge[1],pe=r(null),We=pe[0],we=pe[1],xe=r(null),ye=xe[0],Me=xe[1],Ce=r(null),Ne=Ce[0],Oe=Ce[1],Se=r(null),Ie=Se[0],Le=Se[1],je=r({value:null,action:""}),Ae=je[0],Ee=je[1],ke=i(!0),Re=r(0),Xe=Re[0],Be=Re[1],ze=t.useRef(null);function De(){ce.current&&he.current&&(R(ce.current.clientWidth-he.current.clientWidth/2),Oe(he.current.clientWidth)),ae.current&&(fe(ae.current.clientWidth/-2),A(ce.current.clientWidth/(W.length-1)*w-ae.current.clientWidth/2)),he.current&&oe.current&&(be(oe.current.clientWidth-he.current.clientWidth/2),R(ce.current.clientWidth/(W.length-1)*x-he.current.clientWidth/2));var e=ce.current.clientWidth/(W.length-1)*x-ce.current.clientWidth/(W.length-1)*w,n=ce.current.clientWidth/(W.length-1)*w;oe.current&&z({width:e,left:n}),ue.current&&U((n+e/2-ue.current.clientWidth/2)/ce.current.clientWidth*100);var t=window.getComputedStyle(le.current).transform,r=parseInt(window.getComputedStyle(le.current).width),i=new WebKitCSSMatrix(t),l=Math.round(10*i.m41)/20/r*100,u=window.getComputedStyle(de.current).transform,d=parseInt(window.getComputedStyle(de.current).width),c=new WebKitCSSMatrix(u),o=Math.round(10*c.m41)/20/d*100;Be(isFinite(1/(Math.floor((l-o)/10)/10+1))?1/(Math.floor((l-o)/10)/10+1):0),le.current&&de.current&&oe.current&&$(le.current.clientWidth/2+de.current.clientWidth/2>e*Xe)}function Ke(){ze.current&&g(ze.current),Me(null),ie(!1),"hover"===s&&(P("hidden"),H("hidden"),V("hidden"))}function Pe(){De()}l((function(){return document.addEventListener("mousemove",(function(e){ne(e.clientX)})),window.addEventListener("resize",Pe),De(),Ee({value:null,action:""}),function(){window.removeEventListener("resize",Pe)}}),[]),l((function(){ke.current||(null!==j&&null!==k&&Ne&&z({left:j+Ne/2,width:k-j}),B&&ue.current&&U((B.left+B.width/2-ue.current.clientWidth/2)/ce.current.clientWidth*100),Ae.value&&Fe(Ae.value),le.current&&de.current&&oe.current&&$(le.current.clientWidth/2+de.current.clientWidth/2>oe.current.clientWidth*Xe))}),[Ae]),l((function(){ke.current?ke.current=!1:(ze.current={min:C.value,max:S.value,minIndex:C.valueIndex,maxIndex:S.valueIndex},"jumpTo"===Ae.action&&g(ze.current))}),[C.value,S.value]),l((function(){"hover"===s?Z&&re?(V("visible"),P("hidden"),H("hidden")):We===ae.current&&re?(P("visible"),V("hidden"),H("hidden")):We===he.current&&re?(H("visible"),V("hidden"),P("hidden")):(P("hidden"),H("hidden"),V("hidden")):"always"===s&&(Z?(V("visible"),P("hidden"),H("hidden")):(V("hidden"),P("visible"),H("visible")))}),[Z]),l((function(){if(re&&ye&&We&&ve&&me&&Ne&&null!==Ie&&ce.current&&null!==j&&null!==k){var e=(Ie||0)+(ee-ye),n=Math.round(e/(ce.current.clientWidth/(W.length-1))),t=ce.current.clientWidth/(W.length-1)*n-Ne/2;if(h){if(t>=ve&&t<=me){if(We===ae.current&&t>k)return;if(We===he.current&&t<j)return;We===ae.current&&A(t),We===he.current&&R(t)}}else if(e>=ve&&e<=me){if(We===ae.current&&e>=k)return;if(We===he.current&&e<=j)return;We===ae.current&&A(e),We===he.current&&R(e)}Ee({value:We,action:"move"})}}),[ee]);var Te=function(e){if(ae.current&&he.current&&Ne&&ve&&me&&null!==j&&null!==k){var n=Math.abs(e.clientX-ae.current.getBoundingClientRect().left)>Math.abs(e.clientX-he.current.getBoundingClientRect().left)?he.current:ae.current;Le(n.offsetLeft);var t=n.offsetLeft+(e.clientX-n.getBoundingClientRect().left)-Ne/2,r=Math.round(t/(ce.current.clientWidth/(W.length-1))),i=ce.current.clientWidth/(W.length-1)*r-Ne/2;if(h){if(i>=ve&&i<=me){if(n===ae.current&&i>k)return;if(n===he.current&&i<j)return;n===ae.current&&A(i),n===he.current&&R(i)}}else if(t>=ve&&t<=me){if(n===ae.current&&t>=k)return;if(n===he.current&&t<=j)return;n===ae.current&&A(t),n===he.current&&R(t)}Ee({value:n,action:"jumpTo"})}},Fe=function(e){if(ce.current&&oe.current&&e&&Ne){var n=ce.current.clientWidth/W.length,t=Number(window.getComputedStyle(e).left.replace("px",""));t=(t=t>ce.current.clientWidth?ce.current.clientWidth+Ne/2:t+Ne/2)<=0?0:t;var r=Math.floor(t/n);r>=W.length&&(r=W.length-1);var i="string"==typeof W[r]?W[r]:W[r].toString();e===ae.current&&N({value:y(i),valueIndex:r}),e===he.current&&I({value:y(i),valueIndex:r})}Ee(u(u({},Ae),{value:null}))};return e("div",u({className:"double-range-slider-container"},{children:[n("div",u({className:"double-range-slider-rail",ref:ce,onClick:Te},{children:h&&W.map((function(e,t){return ce.current&&t>0&&t<W.length-1&&n("div",{className:"double-range-slider-step",style:{left:"".concat(ce.current.clientWidth/(W.length-1)*t-2.5,"px")}},t)}))})),n("div",{className:"double-range-slider-track",ref:oe,style:B?{left:"".concat(B.left/(null===(c=ce.current)||void 0===c?void 0:c.clientWidth)*100,"%"),width:"".concat(B.width,"px")}:void 0,onMouseOver:function(){"hover"===s&&Z?(V("visible"),P("hidden"),H("hidden")):"hover"===s&&(V("hidden"),P("hidden"),H("hidden"))},onMouseOut:function(){("hover"===s&&Z||"hover"===s)&&(V("hidden"),P("hidden"),H("hidden"))},onClick:Te}),n("div",u({className:"double-range-slider-min double-range-slider-ball".concat(We===ae.current?" double-range-slider-active":""),style:{left:"".concat(j/(null===(o=ce.current)||void 0===o?void 0:o.clientWidth)*100,"%")},ref:ae,onMouseOver:function(){"hover"!==s||Z?"hover"===s&&Z&&(P("hidden"),V("visible")):(P("visible"),V("hidden"))},onMouseOut:function(){"hover"!==s||Z?"hover"===s&&Z&&(P("hidden"),V("hidden")):(P("hidden"),V("hidden"))},onMouseDown:function(e){Me(ee),we(ae.current),Le(j),ie(!0),document.addEventListener("mouseup",Ke,{once:!0})}},{children:n("div",u({className:"double-range-slider-tooltip ".concat(v?"double-range-slider-".concat(v):"double-range-slider-over"),style:{visibility:K},ref:le},{children:n("p",u({className:"double-range-slider-min-text-holder double-range-slider-text-holder"},{children:C.value}))}))})),n("div",u({className:"double-range-slider-mid double-range-slider-tooltip ".concat(v?"double-range-slider-".concat(v):"double-range-slider-over"),ref:ue,style:{visibility:F,left:"".concat(Q,"%")}},{children:n("p",u({className:"double-range-slider-mid-text-holder double-range-slider-text-holder"},{children:C.value===S.value?"".concat(C.value):"".concat(C.value," - ").concat(S.value)}))})),n("div",u({className:"double-range-slider-max double-range-slider-ball".concat(We===he.current?" double-range-slider-active":""),style:{left:"".concat(k/(null===(a=ce.current)||void 0===a?void 0:a.clientWidth)*100,"%")},ref:he,onMouseOver:function(){"hover"!==s||Z?"hover"===s&&Z&&(H("hidden"),V("visible")):(H("visible"),V("hidden"))},onMouseOut:function(){"hover"!==s||Z?"hover"===s&&Z&&(H("hidden"),V("hidden")):(H("hidden"),V("hidden"))},onMouseDown:function(e){Me(ee),we(he.current),Le(k),ie(!0),document.addEventListener("mouseup",Ke,{once:!0})}},{children:n("div",u({className:"double-range-slider-tooltip ".concat(v?"double-range-slider-".concat(v):"double-range-slider-over"),style:{visibility:G},ref:de},{children:n("p",u({className:"double-range-slider-max-text-holder double-range-slider-text-holder"},{children:S.value}))}))}))]}))};export{d as RangeSlider};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as r,useRef as i,useEffect as o}from"react";import l,{ThemeProvider as u}from"styled-components";var d=function(){return d=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},d.apply(this,arguments)};function c(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var a,s,h,f,p,v,x,b,m,g,w,y,W,M,C,S=l.div(a||(a=c(["\n    position: relative;\n    font-size: 16px;\n    color: #fff;\n    width: 400px;\n    height: 100%;\n    //top right bottom left\n    margin: 150px 50px 200px 50px;\n"],["\n    position: relative;\n    font-size: 16px;\n    color: #fff;\n    width: 400px;\n    height: 100%;\n    //top right bottom left\n    margin: 150px 50px 200px 50px;\n"]))),O=l.div(s||(s=c(["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    z-index: 0;\n"],["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    z-index: 0;\n"])),(function(e){return e.theme.secondaryColor}),(function(e){return e.theme.sliderLength})),k=l.div(h||(h=c(["\n    position: absolute;\n    z-index: 1;\n    height: 10px;\n    width: 5px;\n    border-radius: 30px;\n    background-color: ",";\n    left: ","px;\n"],["\n    position: absolute;\n    z-index: 1;\n    height: 10px;\n    width: 5px;\n    border-radius: 30px;\n    background-color: ",";\n    left: ","px;\n"])),(function(e){return e.theme.highlightColor}),(function(e){return e.left})),z=l.div(f||(f=c(["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    position: absolute;\n    top: 0px;\n    left: ","%;\n    width: ","px;\n"],["\n    background-color: ",";\n    width: ","px;\n    height: 10px;\n    border-radius: 50px;\n    position: absolute;\n    top: 0px;\n    left: ","%;\n    width: ","px;\n"])),(function(e){return e.theme.primaryColor}),(function(e){return e.theme.sliderLength}),(function(e){var n=e.track,t=e.railWidth;return((null==n?void 0:n.left)||0/t)/4}),(function(e){var n=e.track;return null==n?void 0:n.width})),N=l.p(p||(p=c(["\n    -webkit-touch-callout: none; // iOS Safari\n    -webkit-user-select: none; // Safari\n    -khtml-user-select: none; // Konqueror HTML\n    -moz-user-select: none; // Old versions of Firefox\n    -ms-user-select: none; // Internet Explorer/Edge\n    user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox\n    white-space: nowrap;\n"],["\n    -webkit-touch-callout: none; // iOS Safari\n    -webkit-user-select: none; // Safari\n    -khtml-user-select: none; // Konqueror HTML\n    -moz-user-select: none; // Old versions of Firefox\n    -ms-user-select: none; // Internet Explorer/Edge\n    user-select: none; // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox\n    white-space: nowrap;\n"]))),P=l(N)(v||(v=c([""],[""]))),L=l(N)(x||(x=c([""],[""]))),I=l(N)(b||(b=c([""],[""]))),E=l.div(m||(m=c(["\n    background-color: ",";\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    height: 20px;\n    width: auto;\n    color: #fff;\n    text-align: center;\n    border-radius: 6px;\n    padding: 15px 20px;\n    flex-wrap: nowrap;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n    visibility: ",";\n    ",'\n\n    &:after {\n        content: " ";\n        position: absolute;\n        margin-left: var(--after-margin-left, -10px);\n        border-width: 10px;\n        border-style: solid;\n        pointer-events: none;\n        left: var(--after-left, 50%);\n        ',"\n    }\n"],["\n    background-color: ",";\n    visibility: hidden;\n    display: flex;\n    align-items: center;\n    height: 20px;\n    width: auto;\n    color: #fff;\n    text-align: center;\n    border-radius: 6px;\n    padding: 15px 20px;\n    flex-wrap: nowrap;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n    visibility: ",";\n    ",'\n\n    &:after {\n        content: " ";\n        position: absolute;\n        margin-left: var(--after-margin-left, -10px);\n        border-width: 10px;\n        border-style: solid;\n        pointer-events: none;\n        left: var(--after-left, 50%);\n        ',"\n    }\n"])),(function(e){return e.theme.primaryColor}),(function(e){return e.visibility}),(function(e){var n=e.tooltipPosition,t=e.theme.ballSize;return"under"===n?"top: ".concat(t/2+35,"px;"):"bottom: ".concat(t/2+35,"px;")}),(function(e){var n=e.tooltipPosition,t=e.theme.primaryColor;return"under"===n?"\n                    border-color: transparent transparent ".concat(t," transparent;\n                    bottom: 100%; /* At the top of the tooltip */\n                "):"\n                    border-color: ".concat(t," transparent transparent transparent;\n                    top: 100%; /* At the bottom of the tooltip */\n                ")})),A=l(E)(g||(g=c([""],[""]))),j=l(E)(w||(w=c(["\n    bottom: ","px;\n    left: ","%;\n"],["\n    bottom: ","px;\n    left: ","%;\n"])),(function(e){return e.theme.ballSize/2+25}),(function(e){return e.leftOffset})),H=l(E)(y||(y=c([""],[""]))),R=l.div(W||(W=c(["\n    background-color: ",";\n    outline: "," 5px solid;\n    z-index: 2;\n    width: ","px;\n    height: ","px;\n    border-radius: 50%;\n    position: absolute;\n    top: ","px;\n    left: ","%;\n    ","\n\n    "," {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n"],["\n    background-color: ",";\n    outline: "," 5px solid;\n    z-index: 2;\n    width: ","px;\n    height: ","px;\n    border-radius: 50%;\n    position: absolute;\n    top: ","px;\n    left: ","%;\n    ","\n\n    "," {\n        left: 50%;\n        transform: translateX(-50%);\n    }\n"])),(function(e){return e.theme.highlightColor}),(function(e){return e.theme.primaryColor}),(function(e){return e.theme.ballSize}),(function(e){return e.theme.ballSize}),(function(e){return-5*(e.theme.ballSize-10)/10}),(function(e){return e.leftOffset}),(function(e){return e.isActive?"z-index: 4;":""}),E),X=l(R)(M||(M=c([""],[""]))),F=l(R)(C||(C=c([""],[""]))),T={primaryColor:"#f3bc3e",secondaryColor:"#8c8c8c",highlightColor:"#f5f5f5",sliderLength:400,ballSize:25},K=function(l){var c,a,s,h=l.hasSteps,f=l.tooltipVisibility,p=l.tooltipPosition,v=l.value,x=l.onChange,b=l.from,m=l.to,g=l.formatter,w=l.customTheme,y=l.className,W=v instanceof Array?v:Array.from(function(e,n,t){return Array.from(Array.from(Array(Math.ceil((n-e)/t)).keys()),(function(n){return e+n*t}))}(v.min,v.max+1,1)),M=b?-1===W.indexOf(b)?0:W.indexOf(b):0,C=m?-1===W.indexOf(m)?W.length-1:W.indexOf(m):W.length-1,N=g||function(e){return"".concat(e)},E=r({value:N(W[M]),valueIndex:M}),R=E[0],K=E[1],B=r({value:N(W[C]),valueIndex:C}),q=B[0],D=B[1];f||(f="always");var V=r(null),G=V[0],J=V[1],Q=r(null),U=Q[0],Y=Q[1],Z=r(null),$=Z[0],_=Z[1],ee=r("always"===f?"visible":"hidden"),ne=ee[0],te=ee[1],re=r("hidden"),ie=re[0],oe=re[1],le=r("always"===f?"visible":"hidden"),ue=le[0],de=le[1],ce=r(null),ae=ce[0],se=ce[1],he=r(!1),fe=he[0],pe=he[1],ve=r(0),xe=ve[0],be=ve[1],me=r(!1),ge=me[0],we=me[1],ye=i(null),We=i(null),Me=i(null),Ce=i(null),Se=i(null),Oe=i(null),ke=i(null),ze=i(null),Ne=r(null),Pe=Ne[0],Le=Ne[1],Ie=r(null),Ee=Ie[0],Ae=Ie[1],je=r(null),He=je[0],Re=je[1],Xe=r(null),Fe=Xe[0],Te=Xe[1],Ke=r(null),Be=Ke[0],qe=Ke[1],De=r(null),Ve=De[0],Ge=De[1],Je=r({value:null,action:""}),Qe=Je[0],Ue=Je[1],Ye=i(!0),Ze=r(0),$e=Ze[0],_e=Ze[1],en=t.useRef(null);function nn(){Se.current&&ze.current&&(Y(Se.current.clientWidth-ze.current.clientWidth/2),qe(ze.current.clientWidth)),ke.current&&(Le(ke.current.clientWidth/-2),J(Se.current.clientWidth/(W.length-1)*M-ke.current.clientWidth/2)),ze.current&&Oe.current&&(Ae(Oe.current.clientWidth-ze.current.clientWidth/2),Y(Se.current.clientWidth/(W.length-1)*C-ze.current.clientWidth/2));var e=Se.current.clientWidth/(W.length-1)*C-Se.current.clientWidth/(W.length-1)*M,n=Se.current.clientWidth/(W.length-1)*M;Oe.current&&_({width:e,left:n}),Me.current&&se((n+e/2-Me.current.clientWidth/2)/Se.current.clientWidth*100);var t=window.getComputedStyle(We.current).transform,r=parseInt(window.getComputedStyle(We.current).width),i=new WebKitCSSMatrix(t),o=Math.round(10*i.m41)/20/r*100,l=window.getComputedStyle(Ce.current).transform,u=parseInt(window.getComputedStyle(Ce.current).width),d=new WebKitCSSMatrix(l),c=Math.round(10*d.m41)/20/u*100;_e(isFinite(1/(Math.floor((o-c)/10)/10+1))?1/(Math.floor((o-c)/10)/10+1):0),We.current&&Ce.current&&Oe.current&&pe(We.current.clientWidth/2+Ce.current.clientWidth/2>e*$e)}function tn(){en.current&&x(en.current),Te(null),we(!1),"hover"===f&&(te("hidden"),de("hidden"),oe("hidden"))}function rn(){nn()}o((function(){return document.addEventListener("mousemove",(function(e){be(e.clientX)})),window.addEventListener("resize",rn),nn(),Ue({value:null,action:""}),function(){window.removeEventListener("resize",rn)}}),[]),o((function(){if(!Ye.current){if(null!==G&&null!==U&&Be&&_({left:G+Be/2,width:U-G}),Be&&$&&Me.current&&ye.current){var e=$.left+$.width/2-Me.current.clientWidth/2;e<-1*Number(window.getComputedStyle(ye.current).marginLeft.replace("px",""))-Be?(e=-1*Number(window.getComputedStyle(ye.current).marginLeft.replace("px",""))-Be,Me.current.style.setProperty("--after-left","0"),Me.current.style.setProperty("--after-margin-left","".concat($.left+$.width/2,"px"))):e+Me.current.clientWidth>ye.current.clientWidth+Number(window.getComputedStyle(ye.current).marginRight.replace("px",""))+Be?(e=ye.current.clientWidth+Number(window.getComputedStyle(ye.current).marginRight.replace("px",""))-Me.current.clientWidth+Be,Me.current.style.setProperty("--after-left","0"),Me.current.style.setProperty("--after-margin-left","".concat($.left+$.width/2-e-Be,"px"))):(Me.current.style.setProperty("--after-left","50%"),Me.current.style.setProperty("--after-margin-left","-10px")),se(e/Se.current.clientWidth*100)}Qe.value&&ln(Qe.value),We.current&&Ce.current&&Oe.current&&pe(We.current.clientWidth/2+Ce.current.clientWidth/2>Oe.current.clientWidth*$e)}}),[Qe]),o((function(){Ye.current?Ye.current=!1:(en.current={min:R.value,max:q.value,minIndex:R.valueIndex,maxIndex:q.valueIndex},"jumpTo"===Qe.action&&x(en.current))}),[R.value,q.value]),o((function(){"hover"===f?fe&&ge?(oe("visible"),te("hidden"),de("hidden")):He===ke.current&&ge?(te("visible"),oe("hidden"),de("hidden")):He===ze.current&&ge?(de("visible"),oe("hidden"),te("hidden")):(te("hidden"),de("hidden"),oe("hidden")):"always"===f&&(fe?(oe("visible"),te("hidden"),de("hidden")):(oe("hidden"),te("visible"),de("visible")))}),[fe]),o((function(){if(ge&&Fe&&He&&Pe&&Ee&&Be&&null!==Ve&&Se.current&&null!==G&&null!==U){var e=(Ve||0)+(xe-Fe),n=Math.round(e/(Se.current.clientWidth/(W.length-1))),t=Se.current.clientWidth/(W.length-1)*n-Be/2;if(h){if(t>=Pe&&t<=Ee){if(He===ke.current&&t>U)return;if(He===ze.current&&t<G)return;He===ke.current&&J(t),He===ze.current&&Y(t)}}else if(e>=Pe&&e<=Ee){if(He===ke.current&&e>=U)return;if(He===ze.current&&e<=G)return;He===ke.current&&J(e),He===ze.current&&Y(e)}Ue({value:He,action:"move"})}}),[xe]);var on=function(e){if(ke.current&&ze.current&&Be&&Pe&&Ee&&null!==G&&null!==U){var n=Math.abs(e.clientX-ke.current.getBoundingClientRect().left)>Math.abs(e.clientX-ze.current.getBoundingClientRect().left)?ze.current:ke.current;Ge(n.offsetLeft);var t=n.offsetLeft+(e.clientX-n.getBoundingClientRect().left)-Be/2,r=Math.round(t/(Se.current.clientWidth/(W.length-1))),i=Se.current.clientWidth/(W.length-1)*r-Be/2;if(h){if(i>=Pe&&i<=Ee){if(n===ke.current&&i>U)return;if(n===ze.current&&i<G)return;n===ke.current&&J(i),n===ze.current&&Y(i)}}else if(t>=Pe&&t<=Ee){if(n===ke.current&&t>=U)return;if(n===ze.current&&t<=G)return;n===ke.current&&J(t),n===ze.current&&Y(t)}Ue({value:n,action:"jumpTo"})}},ln=function(e){if(Se.current&&Oe.current&&e&&Be){var n=Se.current.clientWidth/W.length,t=Number(window.getComputedStyle(e).left.replace("px",""));t=(t=t>Se.current.clientWidth?Se.current.clientWidth+Be/2:t+Be/2)<=0?0:t;var r=Math.floor(t/n);r>=W.length&&(r=W.length-1);var i="string"==typeof W[r]?W[r]:W[r].toString();e===ke.current&&K({value:N(i),valueIndex:r}),e===ze.current&&D({value:N(i),valueIndex:r})}Ue(d(d({},Qe),{value:null}))};return e(u,d({theme:d(d({},T),w)},{children:n(S,d({className:"double-range-slider-container ".concat(y||""),ref:ye},{children:[e(O,d({className:"double-range-slider-rail",ref:Se,onClick:on},{children:h&&W.map((function(n,t){return Se.current&&t>0&&t<W.length-1&&e(k,{className:"double-range-slider-step",left:Se.current.clientWidth/(W.length-1)*t-2.5},t)}))})),e(z,{className:"double-range-slider-track",ref:Oe,track:$,railWidth:null===(c=Se.current)||void 0===c?void 0:c.clientWidth,onMouseOver:function(){"hover"===f&&fe?(oe("visible"),te("hidden"),de("hidden")):"hover"===f&&(oe("hidden"),te("hidden"),de("hidden"))},onMouseOut:function(){("hover"===f&&fe||"hover"===f)&&(oe("hidden"),te("hidden"),de("hidden"))},onClick:on}),e(X,d({className:"double-range-slider-min double-range-slider-ball".concat(He===ke.current?" double-range-slider-active":""),isActive:He===ze.current,leftOffset:G/(null===(a=Se.current)||void 0===a?void 0:a.clientWidth)*100,ref:ke,onMouseOver:function(){"hover"!==f||fe?"hover"===f&&fe&&(te("hidden"),oe("visible")):(te("visible"),oe("hidden"))},onMouseOut:function(){"hover"!==f||fe?"hover"===f&&fe&&(te("hidden"),oe("hidden")):(te("hidden"),oe("hidden"))},onMouseDown:function(e){Te(xe),Re(ke.current),Ge(G),we(!0),document.addEventListener("mouseup",tn,{once:!0})}},{children:e(A,d({className:"double-range-slider-tooltip ".concat(p?"double-range-slider-".concat(p):"double-range-slider-over"),tooltipPosition:p,visibility:ne,ref:We},{children:e(P,d({className:"double-range-slider-text-holder double-range-slider-text-holder-min"},{children:R.value}))}))})),e(j,d({className:"double-range-slider-mid double-range-slider-tooltip ".concat(p?"double-range-slider-".concat(p):"double-range-slider-over"),tooltipPosition:p,visibility:ie,leftOffset:ae,ref:Me},{children:e(L,d({className:"double-range-slider-text-holder double-range-slider-text-holder-mid"},{children:R.value===q.value?"".concat(R.value):"".concat(R.value," - ").concat(q.value)}))})),e(F,d({className:"double-range-slider-max double-range-slider-ball".concat(He===ze.current?" double-range-slider-active":""),isActive:He===ze.current,leftOffset:U/(null===(s=Se.current)||void 0===s?void 0:s.clientWidth)*100,ref:ze,onMouseOver:function(){"hover"!==f||fe?"hover"===f&&fe&&(de("hidden"),oe("visible")):(de("visible"),oe("hidden"))},onMouseOut:function(){"hover"!==f||fe?"hover"===f&&fe&&(de("hidden"),oe("hidden")):(de("hidden"),oe("hidden"))},onMouseDown:function(e){Te(xe),Re(ze.current),Ge(U),we(!0),document.addEventListener("mouseup",tn,{once:!0})}},{children:e(H,d({className:"double-range-slider-tooltip ".concat(p?"double-range-slider-".concat(p):"double-range-slider-over"),tooltipPosition:p,visibility:ue,ref:Ce},{children:e(I,d({className:"double-range-slider-text-holder double-range-slider-text-holder-max"},{children:q.value}))}))}))]}))}))};K.container=S,K.rail=O,K.step=k,K.track=z,K.textHolder=N,K.textHolderMin=P,K.textHolderMid=L,K.textHolderMax=I,K.tooltip=E,K.tooltipMin=A,K.tooltipMid=j,K.tooltipMax=H,K.ball=R,K.ballMin=X,K.ballMax=F;export{K as RangeSlider};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 import React from 'react';
+import { StyledComponent } from 'styled-components';
 
@@ -20,8 +21,55 @@ interface Simple {
     to?: number | string;
+    customTheme?: Partial<Theme>;
+    className?: string;
     formatter?: (value: number | string) => string;
     onChange: (value: Output) => void;
 }
+interface Theme {
+    primaryColor: string;
+    secondaryColor: string;
+    highlightColor: string;
+    sliderLength: number;
+    ballSize: 25;
+}
+interface ExposeElements {
+    container: StyledComponent<"div", any, {}, never>;
+    rail: StyledComponent<"div", any, {}, never>;
+    step: StyledComponent<"div", any, IStep, never>;
+    track: StyledComponent<"div", any, ITrack, never>;
+    textHolder: StyledComponent<"p", any, {}, never>;
+    textHolderMin: StyledComponent<"p", any, {}, never>;
+    textHolderMid: StyledComponent<"p", any, {}, never>;
+    textHolderMax: StyledComponent<"p", any, {}, never>;
+    tooltip: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMin: StyledComponent<"div", any, ITooltip, never>;
+    tooltipMid: StyledComponent<"div", any, ITooltip & ITooltipMid, never>;
+    tooltipMax: StyledComponent<"div", any, ITooltip, never>;
+    ball: StyledComponent<"div", any, IBall, never>;
+    ballMin: StyledComponent<"div", any, IBall, never>;
+    ballMax: StyledComponent<"div", any, IBall, never>;
+}
 
-declare const RangeSlider: React.FC<RangeSliderProps>;
+interface IStep {
+    left: number;
+}
+interface ITrack {
+    track: {
+        width: number;
+        left: number;
+    } | null;
+    railWidth: number;
+}
+interface IBall {
+    isActive: boolean;
+    leftOffset: number;
+}
+interface ITooltip {
+    tooltipPosition: "under" | "over" | undefined;
+    visibility: "visible" | "hidden";
+}
+interface ITooltipMid {
+    leftOffset: number | null;
+}
+declare const RangeSlider: React.FC<RangeSliderProps> & Partial<ExposeElements>;
 
 export { RangeSlider };

package.json

 {
   "name": "react-double-range-slider",
-  "version": "1.8.2",
+  "version": "2.0.0",
   "description": "Range slider component for React 18",
@@ -23,3 +23,4 @@ "main": "dist/cjs/index.js",
     "slider",
-    "typescript"
+    "typescript",
+    "styled-components"
   ],
@@ -39,2 +40,3 @@ "repository": {
     "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.8",
@@ -57,8 +59,10 @@ "babel-loader": "^8.2.5",
     "sass-loader": "^10",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "styled-components": "^5.3.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.5"
   }
 }

New alerts

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

Total package byte prevSize

116485

increased by23.77%

Lines of code

445

increased by20.92%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

28

increased by7.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes