https://react-components-from-scratch.vercel.app/_next/static/chunks/pages/slider-86cf34849788e6c6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[862],{5924:function(e,t,n){"use strict";t.Z=function(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=function e(t){var n,r,o="";if("string"==typeof t||"number"==typeof t)o+=t;else if("object"==typeof t){if(Array.isArray(t))for(n=0;n<t.length;n++)t[n]&&(r=e(t[n]))&&(o&&(o+=" "),o+=r);else for(n in t)t[n]&&(o&&(o+=" "),o+=n)}return o}(e))&&(r&&(r+=" "),r+=t);return r}},2646:function(e){var t=0/0,n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,i=/^0o[0-7]+$/i,l=parseInt,s=Object.prototype.toString;function u(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function c(e){if("number"==typeof e)return e;if("symbol"==typeof(c=e)||c&&"object"==typeof c&&"[object Symbol]"==s.call(c))return t;if(u(e)){var c,a="function"==typeof e.valueOf?e.valueOf():e;e=u(a)?a+"":a}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var d=o.test(e);return d||i.test(e)?l(e.slice(2),d?2:8):r.test(e)?t:+e}e.exports=function(e,t,n){var r,o,i;return void 0===n&&(n=t,t=void 0),void 0!==n&&(n=(n=c(n))==n?n:0),void 0!==t&&(t=(t=c(t))==t?t:0),r=c(e),o=t,i=n,r==r&&(void 0!==i&&(r=r<=i?r:i),void 0!==o&&(r=r>=o?r:o)),r}},7185:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/slider",function(){return n(4651)}])},4651:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return B}});var r=n(2676),o=n(446),i=n.n(o),l=n(5271),s=n(5924),u=n(5234),c=n(2646),a=n.n(c);function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var f=["shift","alt","meta","mod","ctrl"],h={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function v(e){return(h[e]||e).trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}function p(e,t){return void 0===t&&(t=","),e.split(t)}function m(e,t,n){void 0===t&&(t="+");var r=e.toLocaleLowerCase().split(t).map(function(e){return v(e)}),o={alt:r.includes("alt"),ctrl:r.includes("ctrl")||r.includes("control"),shift:r.includes("shift"),meta:r.includes("meta"),mod:r.includes("mod")},i=r.filter(function(e){return!f.includes(e)});return d({},o,{keys:i,description:n})}"undefined"!=typeof document&&(document.addEventListener("keydown",function(e){void 0!==e.ke

1y&&y([v(e.key),v(e.code)])}),document.addEventListener("keyup",function(e){void 0!==e.key&&x([v(e.key),v(e.code)])})),"undefined"!=typeof window&&window.addEventListener("blur",function(){w.clear()});var w=new Set;function g(e){return Array.isArray(e)}function y(e){var t=Array.isArray(e)?e:[e];w.has("meta")&&w.forEach(function(e){return!f.includes(e)&&w.delete(e.toLowerCase())}),t.forEach(function(e){return w.add(e.toLowerCase())})}function x(e){var t=Array.isArray(e)?e:[e];"meta"===e?w.clear():t.forEach(function(e){return w.delete(e.toLowerCase())})}function b(e,t){var n=e.target;void 0===t&&(t=!1);var r=n&&n.tagName;return g(t)?!!(r&&t&&t.some(function(e){return e.toLowerCase()===r.toLowerCase()})):!!(r&&t&&!0===t)}var j=function(e,t,n){void 0===n&&(n=!1);var r,o=t.alt,i=t.meta,l=t.mod,s=t.shift,u=t.ctrl,c=t.keys,a=e.key,d=e.code,f=e.ctrlKey,h=e.metaKey,p=e.shiftKey,m=e.altKey,y=v(d),x=a.toLowerCase();if(!(null!=c&&c.includes(y))&&!(null!=c&&c.includes(x))&&!["ctrl","control","unknown","meta","alt","shift","os"].includes(y))return!1;if(!n){if(!m===o&&"alt"!==x||!p===s&&"shift"!==x)return!1;if(l){if(!h&&!f)return!1}else if(!h===i&&"meta"!==x&&"os"!==x||!f===u&&"ctrl"!==x&&"control"!==x)return!1}return!!(c&&1===c.length&&(c.includes(x)||c.includes(y)))||(c?(void 0===r&&(r=","),(g(c)?c:c.split(r)).every(function(e){return w.has(e.trim().toLowerCase())})):!c)},k=(0,l.createContext)(void 0),C=(0,l.createContext)({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),E=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},L="undefined"!=typeof window?l.useLayoutEffect:l.useEffect;function N(e,t,n,r){var o,i=(0,l.useRef)(null),s=(0,l.useRef)(!1),u=n instanceof Array?r instanceof Array?void 0:r:n,c=g(e)?e.join(null==u?void 0:u.splitKey):e,a=n instanceof Array?n:r instanceof Array?r:void 0,d=(0,l.useCallback)(t,null!=a?a:[]),f=(0,l.useRef)(d);a?f.current=d:f.current=t;var h=(!function e(t,n){return t&&n&&"object"==typeof t&&"object"==typeof n?Object.keys(t).length===Object.keys(n).length&&Object.keys(t).reduce(function(r,o){return r&&e(t[o],n[o])},!0):t===n}((o=(0,l.useRef)(void 0)).current,u)&&(o.current=u),o.current),w=(0,l.useContext)(C).enabledScopes,N=(0,l.useContext)(k);return L(function(){if((null==h?void 0:h.enabled)!==!1&&(e=null==h?void 0:h.scopes,0===w.length&&e?(console.warn('A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'),!0):!!(!e||w.some(function(t){return e.includes(t)})||w.includes("*")))){var e,t=function(e,t){var n;if(void 0===t&&(t=!1),!b(e,["input","textarea","select"])||b(e,null==h?void 0:h.enableOnFormTags)){if(null!==i.current){var r=i.current.getRootNode();if((r instanceof Document||r instanceof ShadowRoot)&&r.activeElement!==i.current&&!i.current.contains(r.activeElement)){E(e);return}}(null==(n=e.target)||!n.isContentEditable||null!=h&&h.enableOnContentEditable)&&p(c,null==h?void 0:h.splitKey).forEach(function(n){var r,o,i,l=m(n,null==h?void 0:h.combinationKey);if(j(e,l,null==h?void 0:h.ignoreModifiers)||null!=(i=l.keys)&&i.includes("*")){if(null!=h&&null!=h.ignoreEventWhen&&h.ignoreEventWhen(e)||t&&s.current)return;if(("function"==typeof(r=null==h?void 0:h.preventDefault)&&r(e,l)||!0===r)&&e.preventDefault(),"function"==typeof(o=null==h?void 0:h.enabled)?!o(e,l):!0!==o&&void 0!==o){E(e);return}f.current(e,l),t||(s.current=!0)}})}}

1,n=function(e){void 0!==e.key&&(y(v(e.code)),((null==h?void 0:h.keydown)===void 0&&(null==h?void 0:h.keyup)!==!0||null!=h&&h.keydown)&&t(e))},r=function(e){void 0!==e.key&&(x(v(e.code)),s.current=!1,null!=h&&h.keyup&&t(e,!0))},o=i.current||(null==u?void 0:u.document)||document;return o.addEventListener("keyup",r),o.addEventListener("keydown",n),N&&p(c,null==h?void 0:h.splitKey).forEach(function(e){return N.addHotkey(m(e,null==h?void 0:h.combinationKey,null==h?void 0:h.description))}),function(){o.removeEventListener("keyup",r),o.removeEventListener("keydown",n),N&&p(c,null==h?void 0:h.splitKey).forEach(function(e){return N.removeHotkey(m(e,null==h?void 0:h.combinationKey,null==h?void 0:h.description))})}}},[c,h,w]),i}function R(e){let{className:t,stops:n,value:o,onChange:i}=e,c=(0,l.useRef)(null),[d,f]=(0,l.useState)(null),[h,v]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{if(!c.current)return;let{width:e}=c.current.getBoundingClientRect();f(e/(n.length-1)*o)},[n.length,o]),(0,l.useEffect)(()=>{return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e);function e(){if(!c.current)return;let{width:e}=c.current.getBoundingClientRect();f(e/(n.length-1)*o)}},[n.length,o]),N("left,down",()=>{if(!c.current)return;let{width:e}=c.current.getBoundingClientRect(),t=e/(n.length-1),r=a()(o-1,0,n.length-1);f(r*t),i(r)},{},[o]),N("right,up",()=>{if(!c.current)return;let{width:e}=c.current.getBoundingClientRect(),t=e/(n.length-1),r=a()(o+1,0,n.length-1);f(r*t),i(r)},{},[o]),(0,r.jsxs)("div",{className:(0,s.Z)("relative z-0 w-full flex justify-center items-center touch-none",h?"cursor-ew-resize":"cursor-pointer",t),ref:c,children:[(0,r.jsx)("div",{className:(0,s.Z)("w-full py-3 flex gap-1"),onClick:e=>{if(!c.current)return;let{left:t,width:r}=c.current.getBoundingClientRect(),o=r/(n.length-1),l=Math.round((e.clientX-t)/o);f(l*o),i(l)},children:Array.from({length:n.length-1}).map((e,t)=>(0,r.jsx)("div",{className:(0,s.Z)("flex-1 h-2 sm:h-3 bg-light w-2",{"rounded-l-md":0===t,"rounded-r-md":t===n.length-2})},t))}),null!=d&&(0,r.jsx)(u.E.div,{tabIndex:0,className:(0,s.Z)("z-10 absolute left-0 top-1/2 w-7 h-7 sm:w-8 sm:h-8 rounded-full border-medium hover:border-dark border-2 shadow-[0px 4px 12px 0px #AB87FF1A] bg-white select-none outline-offset-8 transition-colors cursor-ew-resize",{"border-purple hover:border-purple":h}),initial:!1,animate:{x:d-14,y:"-50%"},transition:{type:"tween",ease:[.165,.84,.44,1],duration:.4},onFocus:()=>v(!0),onBlur:()=>v(!1),onPointerDown:e=>{let{ownerDocument:t}=e.currentTarget;function r(e){if(!c.current)return;let{width:t,left:r}=c.current.getBoundingClientRect(),o=t/(n.length-1),l=Math.round((e.clientX-r)/o),s=a()(l,0,n.length-1);f(s*o),i(s)}v(!0),t.addEventListener("pointermove",r),t.addEventListener("pointerup",function(e){v(!1),t.removeEventListener("pointermove",r)})},children:(0,r.jsx)("div",{className:"absolute top-full left-1/2 -translate-x-1/2 pt-2 select-none",children:n[o]})})]})}function A(e){return(0,r.jsx)("svg",{width:"100",height:"100",viewBox:"0 0 340 340",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,r.jsx)("path",{d:"M340 170C340 263.888 263.888 340 170 340C76.1116 340 0 263.888 0 170C0 76.1116 76.1116 0 170 0C263.888 0 340 76.1116 340 170Z"})})}function S(e){return(0,r.jsx)("svg",{width:"100",height:"100",viewBox:"0 0 412 412",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,r.jsx)("rect",{x:"211.48",y:"-6",width:"300",height:"300",rx:"15",transform:"rotate(46.4634 211.48 -6)"})})}function O(e){return(0,r.jsx)("svg",{width:"100",height:"104",viewBox:"0 0 349 364",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,r.jsx)("path",{d:"M328.852 1.79834C339.737 -2.05613 350.712 7.31786 348.608 18.6715L287.058 350.766C284.954 362.119 271.348 366.937 262.568 359.438L5.74062 140.087C-3.03979 132.588 -0.409476 118.396 10.4752 114.542L328.852 1.79834Z"})})}function B(){let[e,t]=(0,l.useState)(0);return(0,r.jsxs)("div",{className:"max-w-2xl p-4 lg:p-8 mx-auto prose prose-headings:font-700",children:[(0,r.jsxs)("div",{className:"flex flex-row justify-between items-start",children:[(0,r.jsx)("h1",{className:"font-sans",children:"Slider"}),(0,r.jsxs)("div",{className:"flex space-x-4",children:[(0,r.jsx)(i(),{href:"https://github.com/joshuawootonn/react-components-from-scratch/blob/main/pages/slider.tsx",children:(0,r.jsx)("svg",{width:"24.5",height:"24",viewBox:"0 0 98 96",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.3

162 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z",fill:"#24292f"})})}),(0,r.jsx)(i(),{href:"/",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor",className:"w-6 h-6",children:(0,r.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"})})})]})]}),(0,r.jsxs)("p",{children:["This page is the demo for an article on"," ",(0,r.jsx)("a",{href:"https://joshuawootonn.com/react-slider-component",children:"how to create a slider component in react"}),"."]}),(0,r.jsx)("div",{className:"px-8 md:px-0",children:(0,r.jsx)(R,{stops:[(0,r.jsx)(S,{className:"fill-purple"},"1"),(0,r.jsx)(A,{className:"fill-blue"},"2"),(0,r.jsx)(O,{className:"fill-orange"},"3"),(0,r.jsx)(S,{className:"fill-green"},"4"),(0,r.jsx)(A,{className:"fill-yellow"},"5"),(0,r.jsx)(S,{className:"fill-pink"},"6")],value:e,onChange:e=>t(e)})})]})}}},function(e){e.O(0,[446,500,234,888,774,179],function(){return e(e.s=7185)}),_N_E=e.O()}]);