1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,743284,e=>{"use strict";var a=e.i(391398),l=e.i(38856),t=e.i(76206);e.i(603441);var r=e.i(62558);e.i(457450);var n=e.i(418026);let i=(0,r.Layout)(n.MDX_DATA.HooksPackage);function o(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",...(0,l.useMDXComponents)(),...e.components},{Demo:n,InstallScript:i}=r;return n||s("Demo",!0),i||s("InstallScript",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.h1,{id:"mantine-hooks",children:"Mantine hooks"}),"\n",(0,a.jsx)(r.p,{children:(0,a.jsx)(r.a,{href:"https://www.npmjs.com/package/@mantine/hooks",children:(0,a.jsx)(r.img,{src:"https://img.shields.io/npm/dm/@mantine/hooks",alt:"npm"})})}),"\n",(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.a,{href:"https://www.npmjs.com/package/@mantine/hooks",children:"@mantine/hooks"})," package\nprovides more than 70 hooks to build custom components. The ",(0,a.jsx)(r.code,{children:"@mantine/hooks"}),"\npackage is used internally in most other ",(0,a.jsx)(r.code,{children:"@mantine/*"})," packages â\nit is required to be installed in your project to use Mantine components."]}),"\n",(0,a.jsx)(r.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsx)(i,{packages:"@mantine/hooks"}),"\n",(0,a.jsx)(r.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsxs)(r.p,{children:["The ",(0,a.jsx)(r.code,{children:"@mantine/hooks"})," package can be used in any web React application, and state\nmanagement hooks (like ",(0,a.jsx)(r.a,{href:"/hooks/use-pagination",children:"use-pagination"})," or ",(0,a.jsx)(r.a,{href:"/hooks/use-queue",children:"use-queue"}),")\nare also compatible with React Native. The package can be used even if you\ndo not use Mantine components or other Mantine libraries â it is standalone\nand has no dependencies except React."]}),"\n",(0,a.jsxs)(r.p,{children:["Example of using ",(0,a.jsx)(r.a,{href:"/hooks/use-move",children:"use-move"})," hook to create a custom slider:"]}),"\n",(0,a.jsx)(n,{data:t.SliderDemos.customSlider,demoProps:{defaultExpanded:!1}}),"\n",(0,a.jsx)(r.h2,{id:"license",children:"License"}),"\n",(0,a.jsx)(r.p,{children:"MIT"})]})}function s(e,a){throw Error("Expected "+(a?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}e.s(["default",0,function(e={}){return(0,a.jsx)(i,{...e,children:(0,a.jsx)(o,{...e})})}])},318266,(e,a,l)=>{let t="/hooks/package";(window.__NEXT_P=window.__NEXT_P||[]).push([t,()=>e.r(743284)]),a.hot&&a.hot.dispose(function(){window.__NEXT_P.push([t])})},414124,e=>{"use strict";var a=e.i(191788),l=e.i(171481);let t=new Map([["bold",a.createElement(a.Fragment,null,a.createElement("path",{d:"M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z"}))],["duotone",a.createElement(a.Fragment,null,a.createElement("path",{d:"M208,32V224a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V32A16,16,0,0,1,64,16H192A16,16,0,0,1,208,32Z",opacity:"0.2"}),a.createElement("path",{d:"M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"}))],["fill",a.createElement(a.Fragment,null,a.createElement("path",{d:"M192,16H64A16,16,0,0,0,48,32V224a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V32A16,16,0,0,0,192,16ZM100,200a12,12,0,1,1,12-12A12,12,0,0,1,100,200Zm0-60a12,12,0,1,1,12-12A12,12,0,0,1,100,140Zm0-60a12,12,0,1,1,12-12A12,12,0,0,1,100,80Zm56,120a12,12,0,1,1,12-12A12,12,0,0,1,156,200Zm0-60a12,12,0,1,1,12-12A12,12,0,0,1,156,140Zm0-60a12,12,0,1,1,12-12A12,12,0,0,1,156,80Z"}))],["light",a.createElement(a.Fragment,null,a.createElement("path",{d:"M102,60A10,10,0,1,1,92,50,10,10,0,0,1,102,60Zm62,10a10,10,0,1,0-10-10A10,10,0,0,0,164,70ZM92,118a10,10,0,1,0,10,10A10,10,0,0,0,92,118Zm72,0a10,10,0,1,0,10,10A10,10,0,0,0,164,118ZM92,186a10,
110,0,1,0,10,10A10,10,0,0,0,92,186Zm72,0a10,10,0,1,0,10,10A10,10,0,0,0,164,186Z"}))],["regular",a.createElement(a.Fragment,null,a.createElement("path",{d:"M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"}))],["thin",a.createElement(a.Fragment,null,a.createElement("path",{d:"M100,60a8,8,0,1,1-8-8A8,8,0,0,1,100,60Zm64,8a8,8,0,1,0-8-8A8,8,0,0,0,164,68ZM92,120a8,8,0,1,0,8,8A8,8,0,0,0,92,120Zm72,0a8,8,0,1,0,8,8A8,8,0,0,0,164,120ZM92,188a8,8,0,1,0,8,8A8,8,0,0,0,92,188Zm72,0a8,8,0,1,0,8,8A8,8,0,0,0,164,188Z"}))]]),r=a.forwardRef((e,r)=>a.createElement(l.default,{ref:r,...e,weights:t}));r.displayName="DotsSixVerticalIcon",e.s(["DotsSixVerticalIcon",0,r],414124)},648863,e=>{"use strict";var a=Object.defineProperty;e.s(["__exportAll",0,(e,l)=>{let t={};for(var r in e)a(t,r,{get:e[r],enumerable:!0});return l||a(t,Symbol.toStringTag,{value:"Module"}),t}])},76206,e=>{"use strict";var a=e.i(648863),l=e.i(60695),t=e.i(391398);let r={type:"configurator",component:function(e){return(0,t.jsx)(l.Slider,{defaultValue:40,marks:[{value:20,label:"20%"},{value:50,label:"50%"},{value:80,label:"80%"}],...e})},code:` 2import { Slider } from '@mantine/core'; 3 4 5function Demo() { 6 return ( 7 <Slider 8 {{props}} 9 defaultValue={40} 10 marks={[ 11 { value: 20, label: '20%' }, 12 { value: 50, label: '50%' }, 13 { value: 80, label: '80%' }, 14 ]} 15 /> 16 ); 17} 18`,centered:!0,maxWidth:400,controls:[{prop:"color",type:"color",initialValue:"blue",libraryValue:"__none__"},{prop:"size",type:"size",initialValue:"md",libraryValue:"md"},{prop:"radius",type:"size",initialValue:"xl",libraryValue:"xl"},{prop:"showLabelOnHover",type:"boolean",initialValue:!0,libraryValue:!0},{prop:"labelAlwaysOn",type:"boolean",initialValue:!1,libraryValue:!1}]};var n={track:"m_7b015c03",mark:"m_88156515",markLabel:"m_beb40edf",thumb:"m_7afd1c8e"},i=e.i(232471);let o={type:"code",component:function(){return(0,t.jsx)(i.Box,{maw:400,pt:15,pb:20,mx:"auto",children:(0,t.jsx)(l.Slider,{defaultValue:40,size:2,classNames:n,marks:[{value:20,label:"20%"},{value:50,label:"50%"},{value:80,label:"80%"}]})})},code:[{fileName:"Demo.tsx",code:` 19import { Slider } from '@mantine/core'; 20import classes from './Demo.module.css'; 21 22function Demo() { 23 return ( 24 <Slider 25 defaultValue={40} 26 size={2} 27 classNames={classes} 28 marks={[ 29 { value: 20, label: '20%' }, 30 { value: 50, label: '50%' }, 31 { value: 80, label: '80%' }, 32 ]} 33 /> 34 ); 35} 36`,language:"tsx"},{fileName:"Demo.module.css",code:` 37.track { 38 &::before { 39 background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); 40 } 41} 42 43.mark { 44 width: 6px; 45 height: 6px; 46 border-radius: 6px; 47 transform: translateX(-3px) translateY(-2px); 48 border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); 49 50 &[data-filled] { 51 border-color: var(--mantine-color-blue-6); 52 } 53} 54 55.markLabel { 56 font-size: var(--mantine-font-size-xs); 57 margin-bottom: 5px; 58 margin-top: 0; 59} 60 61.thumb { 62 height: 16px; 63 width: 16px; 64 background-color: var(--mantine-color-white); 65 border-width: 1px; 66 box-shadow: var(--mantine-shadow-sm); 67} 68`,language:"scss"}]},s={type:"code",component:function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Slider,{defaultValue:40,marks:[{value:10},{value:40},{value:95}],mb:32}),(0,t.jsx)(l.Slider,{mb:32,defaultValue:40,marks:[{value:20,label:"20%"},{value:50,label:"50%"},{value:80,label:"80%"}]})]})},code:` 69import { Slider } from '@mantine/core'; 70 71function Demo() { 72 return ( 73 <> 74 <Slider defaultValue={40} marks={[{ value: 10 }, { value: 40 }, { value: 95 }]} mb={32} /> 75 <Slider 76 mb={32} 77 defaultValue={40} 78 marks={[ 79 { value: 20, label: '20%' }, 80 { value: 50, label: '50%' }, 81 { value: 80, label: '80%' }, 82 ]} 83 /> 84 </> 85 ); 86} 87`,centered:!0,maxWidth:400};var u=e.i(883364);let d={type:"code",component:function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(u.Text,{size:"sm",children:"No label"}),(0,t.jsx)(l.Slider,{defaultValue:40,label:null}),(0,t.jsx)(u.Text,{size:"sm",mt:"xl",children:"Formatted label"}),(0,t.jsx)(l.Slider,{defaultValue:40,label:e=>`${e} \xb0C`}),(0,t.jsx)(u.Text,{size:"sm",mt:"xl",children:"Label always visible"}),(0,t.jsx)(l.Slider,{defaultValue:40,labelAlwaysOn:!0}),(0,t.jsx)(u.Text,{size:"sm",mt:"xl",children:"Custom label transition"}),(0,t.jsx)(l.Slider,{defaultValue:40,labelTransitionProps:{transition:"skew-down",duration:150,timingFunction:"linear"}})]})},code:` 88import { Slider, Text } from '@mantine/core'; 89 90function Demo() { 91 return ( 92 <> 93 <Text size="sm">No label</Text> 94 <Slider defaultValue={40} label={null} /> 95 96 <Text size="sm" mt="xl">
96Formatted label</Text> 97 <Slider defaultValue={40} label={(value) => \`\${value} \xb0C\`} /> 98 99 <Text size="sm" mt="xl">Label always visible</Text> 100 <Slider defaultValue={40} labelAlwaysOn /> 101 102 <Text size="sm" mt="xl">Custom label transition</Text> 103 <Slider 104 defaultValue={40} 105 labelTransitionProps={{ 106 transition: 'skew-down', 107 duration: 150, 108 timingFunction: 'linear', 109 }} 110 /> 111 </> 112 ); 113} 114`,centered:!0,maxWidth:400},m=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}],c={type:"code",component:function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(u.Text,{children:"Decimal step"}),(0,t.jsx)(l.Slider,{defaultValue:0,min:-10,max:10,label:e=>e.toFixed(1),step:.1,styles:{markLabel:{display:"none"}}}),(0,t.jsx)(u.Text,{mt:"md",children:"Step matched with marks"}),(0,t.jsx)(l.Slider,{defaultValue:50,label:e=>m.find(a=>a.value===e).label,step:25,marks:m,styles:{markLabel:{display:"none"}}})]})},code:` 115import { Slider, Text } from '@mantine/core'; 116 117const marks = [ 118 { value: 0, label: 'xs' }, 119 { value: 25, label: 'sm' }, 120 { value: 50, label: 'md' }, 121 { value: 75, label: 'lg' }, 122 { value: 100, label: 'xl' }, 123]; 124 125function Demo() { 126 return ( 127 <> 128 <Text>Decimal step</Text> 129 <Slider 130 defaultValue={0} 131 min={-10} 132 max={10} 133 label={(value) => value.toFixed(1)} 134 step={0.1} 135 styles={{ markLabel: { display: 'none' } }} 136 /> 137 138 <Text mt="md">Step matched with marks</Text> 139 <Slider 140 defaultValue={50} 141 label={(val) => marks.find((mark) => mark.value === val)!.label} 142 step={25} 143 marks={marks} 144 styles={{ markLabel: { display: 'none' } }} 145 /> 146 </> 147 ); 148} 149`,centered:!0,maxWidth:400};var h=e.i(191788);let p={type:"code",component:function(){let[e,a]=(0,h.useState)(50),[r,n]=(0,h.useState)(50);return(0,t.jsxs)(i.Box,{maw:400,mx:"auto",children:[(0,t.jsx)(l.Slider,{value:e,onChange:a,onChangeEnd:n}),(0,t.jsxs)(u.Text,{mt:"md",size:"sm",children:["onChange value: ",(0,t.jsx)("b",{children:e})]}),(0,t.jsxs)(u.Text,{mt:5,size:"sm",children:["onChangeEnd value: ",(0,t.jsx)("b",{children:r})]})]})},code:` 150import { useState } from 'react'; 151import { Slider, Text, Box } from '@mantine/core'; 152 153function Demo() { 154 const [value, setValue] = useState(50); 155 const [endValue, setEndValue] = useState(50); 156 157 return (
158 <Box maw={400} mx="auto"> 159 <Slider value={value} onChange={setValue} onChangeEnd={setEndValue} /> 160 161 <Text mt="md" size="sm"> 162 onChange value: <b>{value}</b> 163 </Text> 164 <Text mt={5} size="sm"> 165 onChangeEnd value: <b>{endValue}</b> 166 </Text> 167 </Box> 168 ); 169} 170`},v={type:"code",component:function(){return(0,t.jsx)(l.Slider,{defaultValue:60,disabled:!0})},code:` 171import { Slider } from '@mantine/core'; 172 173function Demo() { 174 return <Slider defaultValue={60} disabled />; 175} 176`,centered:!0,maxWidth:340},f={type:"configurator",component:function(e){return(0,t.jsx)(l.Slider,{...e,defaultValue:20})},code:` 177import { Slider } from '@mantine/core'; 178 179function Demo() { 180 return <Slider{{props}} defaultValue={20} />; 181} 182`,maxWidth:400,centered:!0,controls:[{prop:"thumbSize",type:"number",min:16,max:32,initialValue:14,libraryValue:null}]};var b=e.i(171481);let x=new Map([["bold",h.createElement(h.Fragment,null,h.createElement("path",{d:"M178,36a65.6,65.6,0,0,0-46.67,19.33L128,58.66l-3.33-3.33A66,66,0,0,0,12,102c0,72.34,105.81,130.14,110.31,132.57a12,12,0,0,0,11.38,0C138.19,232.14,244,174.34,244,102A66.08,66.08,0,0,0,178,36Zm-5.49,142.36A328.69,328.69,0,0,1,128,210.16a328.69,328.69,0,0,1-44.51-31.8C61.82,159.77,36,131.42,36,102a42,42,0,0,1,71.7-29.7L111,75.63l-7.52,7.52a12,12,0,0,0,0,17l21.7,21.7-13.7,13.69a12,12,0,1,0,17,17l22.18-22.19a12,12,0,0,0,0-17L129,91.63,148.3,72.3A42,42,0,0,1,220,102C220,131.42,194.18,159.77,172.51,178.36Z"}))],["duotone",h.createElement(h.Fragment,null,h.createElement("path",{d:"M232,102c0,66-104,122-104,122S24,168,24,102a54,54,0,0,1,92.18-38.18L128,75.63l11.82-11.81A54,54,0,0,1,232,102Z",opacity:"0.2"}),h.createElement("path",{d:"M178,40a61.6,61.6,0,0,0-43.84,18.16L128,64.32l-6.16-6.16A62,62,0,0,0,16,102c0,70,103.79,126.67,108.21,129a8,8,0,0,0,7.58,0C136.21,228.67,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102a46,46,0,0,1,78.53-32.53l6.16,6.16L106.34,86a8,8,0,0,0,0,11.31l24.53,24.53-16.53,16.52a8,8,0,0,0,11.32,11.32l22.18-22.19a8,8,0,0,0,0-11.31L123.31,91.63l22.16-22.16A46,46,0,0,1,224,102C224,155.61,146.24,204.15,128,214.8Z"}))],["fill",h.createElement(h.Fragment,null,h.createElement("path",{d:"M239.81,107.5c-5.19,67.42-103.7,121.23-108,123.54a8,8,0,0,1-7.58,0C119.8,228.67,16,172,16,102a62,62,0,0,1,96.47-51.55,4,4,0,0,1,.61,6.17L99.72,70a8,8,0,0,0,0,11.31l32.53,32.53L111,135a8,8,0,1,0,11.31,11.31l26.88-26.87a8,8,0,0,0,0-11.31L116.7,75.63l17.47-17.47h0A61.63,61.63,0,0,1,178.41,40C214.73,40.23,242.59,71.29,239.81,107.5Z"}))],["light",h.createElement(h.Fragment,null,h.createElement("path",{d:"M178,42a59.63,59.63,0,0,0-42.43,17.57L128,67.15l-7.57-7.58A60,60,0,0,0,18,102c0,29.2,18.2,59.59,54.1,90.31a334.68,334.68,0,0,0,53.06,37,6,6,0,0,0,5.68,0,334.68,334.68,0,0,0,53.06-37C219.8,161.59,238,131.2,238,102A60.07,60.07,0,0,0,178,42ZM128,217.11C111.59,207.64,30,157.72,30,102a48,48,0,0,1,81.94-33.94l7.57,7.57L107.76,87.39a6,6,0,0,0,0,8.49l25.94,25.94-17.94,17.94a6,6,0,0,0,8.48,8.48l22.19-22.18a6,6,0,0,0,0-8.49L120.49,91.63l23.57-23.57A48,48,0,0,1,226,102C226,157.72,144.41,207.64,128,217.11Z"}))],["regular",h.createElement(h.Fragment,null,h.createElement("path",{d:"M178,40a61.6,61.6,0,0,0-43.84,18.16L128,64.32l-6.16-6.16A62,62,0,0,0,16,102c0,70,103.79,126.67,108.21,129a8,8,0,0,0,7.58,0C136.21,228.67,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102a46,46,0,0,1,78.53-32.53l6.16,6.16L106.34,86a8,8,0,0,0,0,11.31l24.53,24.53-16.53,16.52a8,8,0,0,0,11.32,11.32l22.18-22.19a8,8,0,0,0,0-11.31L123.31,91.63l22.16-22.16A46,46,0,0,1,224,102C224,155.61,146.24,204.15,128,214.8Z"}))],["thin",h.createElement(h.Fragment,null,h.createElement("path",{d:"M178,44a57.59,57.59,0,0,0-41,17l-9,9-9-9a58,58,0,0,0-99,41c0,28.59,18,58.47,53.4,88.79a333.81,333.81,0,0,0,52.7,36.73,4,4,0,0,0,3.8,0,333.81,333.81,0,0,0,52.7-36.73C218,160.47,236,130.59,236,102A58.07,58.07,0,0,0,178,44ZM128,219.42c-14-8-100-59.35-100-117.42a50,50,0,0,1,85.36-35.36l9,9L109.17,88.8a4,4,0,0,0,0,5.66l27.36,27.36-19.36,19.35a4,4,0,0,0,5.66,5.66L145,124.64a4,4,0,0,0,0-5.65L117.66,91.63l
18213.16-13.16h0l11.8-11.81A50,50,0,0,1,228,102C228,160,142,211.46,128,219.42Z"}))]]),g=h.forwardRef((e,a)=>h.createElement(b.default,{ref:a,...e,weights:x}));g.displayName="HeartBreakIcon";var k=e.i(853907),S=e.i(328940);let y={type:"code",component:function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Slider,{thumbChildren:(0,t.jsx)(k.HeartIcon,{size:16}),color:"red",label:null,defaultValue:40,thumbSize:26,styles:{thumb:{borderWidth:2,padding:3}}}),(0,t.jsx)(S.RangeSlider,{mt:"xl",styles:{thumb:{borderWidth:2,padding:3}},color:"red",label:null,defaultValue:[20,60],thumbSize:26,thumbChildren:[(0,t.jsx)(k.HeartIcon,{size:16},"1"),(0,t.jsx)(g,{size:16},"2")]})]})},code:` 183import { Slider, RangeSlider } from '@mantine/core'; 184import { HeartIcon, HeartBreakIcon } from '@phosphor-icons/react'; 185 186function Demo() { 187 return ( 188 <> 189 <Slider 190 thumbChildren={<HeartIcon size={16} />} 191 color="red" 192 label={null} 193 defaultValue={40} 194 thumbSize={26} 195 styles={{ thumb: { borderWidth: 2, padding: 3 } }} 196 /> 197 198 <RangeSlider 199 mt="xl" 200 styles={{ thumb: { borderWidth: 2, padding: 3 } }} 201 color="red" 202 label={null} 203 defaultValue={[20, 60]} 204 thumbSize={26} 205 thumbChildren={[<HeartIcon size={16} key="1" />, <HeartBreakIcon size={16} key="2" />]} 206 /> 207 </> 208 ); 209} 210`,maxWidth:400,centered:!0};function V(e){let a=["KB","MB","GB","TB"],l=0,t=e;for(;t>=1024&&l<a.length-1;)l+=1,t/=1024;return`${t} ${a[l]}`}let j=e=>2**e,w={type:"code",component:function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Slider,{scale:j,step:1,min:2,max:30,labelAlwaysOn:!0,defaultValue:10,label:V}),(0,t.jsx)(S.RangeSlider,{mt:50,scale:j,step:1,min:2,max:30,labelAlwaysOn:!0,defaultValue:[10,20],label:V})]})},code:` 211import { RangeSlider, Slider } from '@mantine/core'; 212 213function valueLabelFormat(value: number) { 214 const units = ['KB', 'MB', 'GB', 'TB']; 215 216 let unitIndex = 0; 217 let scaledValue = value; 218 219 while (scaledValue >= 1024 && unitIndex < units.length - 1) { 220 unitIndex += 1; 221 scaledValue /= 1024; 222 } 223 224 return \`\${scaledValue} \${units[unitIndex]}\`; 225} 226 227const getScale = (v: number) => 2 ** v; 228 229function Demo() { 230 return ( 231 <> 232 <Slider 233 scale={getScale} 234 step={1} 235 min={2} 236 max={30} 237 labelAlwaysOn 238 defaultValue={10} 239 label={valueLabelFormat} 240 /> 241 <RangeSlider 242 mt={50} 243 scale={getScale} 244 step={1} 245 min={2} 246 max={30} 247 labelAlwaysOn 248 defaultValue={[10, 20]} 249 label={valueLabelFormat} 250 /> 251 </> 252 ); 253} 254`,centered:!0,maxWidth:400},A={type:"code",component:function(){return(0,t.jsx)(l.Slider,{inverted:!0,defaultValue:80})},code:` 255import { Slider } from '@mantine/core'; 256 257function Demo() { 258 return <Slider inverted defaultValue={80} />; 259} 260`,centered:!0,maxWidth:400};var M=e.i(220026);let T=` 261import { Slider } from '@mantine/core'; 262 263function Demo() { 264 return <Slider{{props}} marks={[{ value: 20, label: '20%' }, { value: 80, label: '80%' }]} labelAlwaysOn />; 265} 266`,C={type:"styles-api",data:M.SliderStylesApi,component:function(e){return(0,t.jsx)(l.Slider,{marks:[{value:20,label:"20%"},{value:80,label:"80%"}],defaultValue:40,labelAlwaysOn:!0,mb:40,...e})},code:T,centered:!0,maxWidth:400},E={type:"code",component:function(){return(0,t.jsx)(l.Slider,{min:0,max:1,step:5e-4,defaultValue:.5535})},code:` 267import { Slider } from '@mantine/core'; 268 269function Demo() { 270 return <Slider min={0} max={1} step={0.0005} defaultValue={0.5535} />; 271} 272`,centered:!0,maxWidth:340};var D="m_b2d44517",Z=e.i(414124),F=e.i(852361),z=e.i(502315);let L={type:"code",component:function(){let[e,a]=(0,h.useState)(.3),{ref:l}=(0,z.useMove)(({x:e})=>a((0,F.clamp)(e,.1,.9))),r=e<.2||e>.8;return(0,t.jsx)("div",{className:"m_1e8dea5f",children:(0,t.jsxs)("div",{className:"m_b34cb76e",ref:l,children:[(0,t.jsx)("div",{className:"m_9decab9f",style:{width:`calc(${100*e}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`},children:(0,t.jsx)("span",{className:D,"data-floating":r||void 0,"data-filled":!0,children:(100*e).toFixed(0)})}),(0,t.jsx)("div",{className:"m_b2774b70",style:{width:`calc(${(1-e)*100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`},children:(0,t.jsx)("span",{className:D,"data-floating":r||void 0,children:((1-e)*100).toFixed(0)})}),(0,t.jsx)("div",{className:"m_b34877f9",style:{left:`calc(${100*e}% - var(--thumb-width) / 2)`},children:(0,t.jsx)(Z.DotsSixVerticalIcon,{})})]})})},code:[{fileName:"Demo.tsx",code:`
273import { useState } from 'react'; 274import { DotsSixVerticalIcon } from '@phosphor-icons/react'; 275import { clamp, useMove } from '@mantine/hooks'; 276import classes from './Demo.module.css'; 277 278function Demo() { 279 const [value, setValue] = useState(0.3); 280 const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9))); 281 const labelFloating = value < 0.2 || value > 0.8; 282 283 return ( 284 <div className={classes.root}> 285 <div className={classes.track} ref={ref}> 286 <div 287 className={classes.filled} 288 style={{ 289 width: \`calc(\${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)\`, 290 }} 291 > 292 <span className={classes.label} data-floating={labelFloating || undefined} data-filled> 293 {(value * 100).toFixed(0)} 294 </span> 295 </div> 296 297 <div 298 className={classes.empty} 299 style={{ 300 width: \`calc(\${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)\`, 301 }} 302 > 303 <span className={classes.label} data-floating={labelFloating || undefined}> 304 {((1 - value) * 100).toFixed(0)} 305 </span> 306 </div> 307 308 <div 309 className={classes.thumb} 310 style={{ left: \`calc(\${value * 100}% - var(--thumb-width) / 2)\` }} 311 > 312 <DotsSixVerticalIcon /> 313 </div> 314 </div> 315 </div> 316 ); 317} 318`,language:"tsx"},{fileName:"Demo.module.css",code:` 319.root { 320 padding-top: 20px; 321} 322 323.track { 324 --thumb-width: 20px; 325 --thumb-offset: 10px; 326 327 position: relative; 328 height: 60px; 329 display: flex; 330} 331 332.filled { 333 height: 100%; 334 margin-right: calc(var(--thumb-offset) / 2 + var(--thumb-width) / 2); 335 border-radius: var(--mantine-radius-md); 336 background-color: var(--mantine-color-blue-filled); 337 display: flex; 338 align-items: center; 339 padding-inline: 10px; 340} 341 342.empty { 343 height: 100%; 344 margin-left: calc(var(--thumb-offset) / 2 + var(--thumb-width) / 2); 345 border-radius: var(--mantine-radius-md); 346 background-color: var(--mantine-color-gray-1); 347 display: flex; 348 align-items: center; 349 padding-inline: 10px; 350 justify-content: flex-end; 351 352 @mixin dark { 353 background-color: var(--mantine-color-dark-6); 354 } 355} 356 357.thumb { 358 position: absolute; 359 background-color: var(--mantine-color-white); 360 border: 1px solid var(--mantine-color-gray-2); 361 border-radius: var(--mantine-radius-md); 362 height: 100%; 363 width: var(--thumb-width); 364 top: 0; 365 display: flex; 366 align-items: center; 367 justify-content: center; 368 color: var(--mantine-color-gray-5); 369 370 @mixin dark { 371 background-color: var(--mantine-color-dark-6); 372 border-color: var(--mantine-color-dark-4); 373 color: var(--mantine-color-dark-0); 374 } 375} 376 377.label { 378 font-size: var(--mantine-font-size-xl); 379 font-weight: 700; 380 transition: 381 transform 100ms ease, 382 color 100ms ease; 383 384 &[data-filled] { 385 color: var(--mantine-color-white); 386 } 387 388 &[data-floating] { 389 transform: translateY(-44px) translateX(-10px); 390 color: var(--mantine-color-black); 391 392 &:not([data-filled]) { 393 transform: translateY(-44px) translateX(10px); 394 } 395 396 @mixin dark { 397 color: var(--mantine-color-white); 398 } 399 } 400} 401`,language:"scss"}],maxWidth:500,centered:!0};var R=e.i(671640);let N={type:"code",component:function(){return(0,t.jsxs)(R.Stack,{children:[(0,t.jsx)(l.Slider,{restrictToMarks:!0,defaultValue:25,marks:Array.from({length:5}).map((e,a)=>({value:25*a}))}),(0,t.jsx)(S.RangeSlider,{restrictToMarks:!0,defaultValue:[5,15],marks:[{value:5},{value:15},{value:25},{value:35},{value:70},{value:80},{value:90}]})]})},code:` 402import { RangeSlider, Slider, Stack } from '@mantine/core'; 403 404function Demo() { 405 return ( 406 <Stack> 407 <Slider 408 restrictToMarks 409 defaultValue={25} 410 marks={Array.from({ length: 5 }).map((_, index) => ({ value: index * 25 }))} 411 /> 412 413 <RangeSlider 414 restrictToMarks 415 defaultValue={[5, 15]} 416 marks={[ 417 { value: 5 }, 418 { value: 15 }, 419 { value: 25 }, 420 { value: 35 }, 421 { value: 70 }, 422 { value: 80 }, 423 { value: 90 }, 424 ]} 425 /> 426 </Stack> 427 ); 428} 429`,centered:!0,maxWidth:400},_={type:"code",component:function(){return(0,t.jsx)(l.Slider,{domain:[0,100],min:10,max:90,defaultValue:25,mb:40,marks:[{value:10,label:"min"},{value:90,label:"max"}]})},code:` 430import { Slider } from '@mantine/core'; 431 432function Demo() { 433 return ( 434 <Slider 435 domain={[0, 100]} 436 min={10} 437 max={90} 438 defaultValue={25} 439 marks={[ 440 { value: 10, label: 'min' }, 441 { value: 90, label: 'max' }, 442 ]} 443 /> 444 ); 445} 446`,maxWidth:400,centered:!0},B=[{value:20,label:"20%"},{value:50,label:"50%"},{value:80,label:"80%"}],P={type:"code",component:function(){return(0,t.jsxs)("div",{style:{display:"flex",gap:40},children:[(0,t.jsx)(l.Slider,{orientation:"vertical",defaultValue:45,marks:B}),(0,t.jsx)(S.RangeSlider,{orientation:"vertical",defaultValue:[25,65],marks:B})]})},code:` 447import { RangeSlider, Slider } from '@mantine/core'; 448 449const marks = [ 450 { value: 20, label: '20%' }, 451 { value: 50, label: '50%' }, 452 { value: 80, label: '80%' }, 453]; 454 455function Demo() { 456 return ( 457 <div style={{ display: 'flex', gap: 40 }}> 458 <Slider orientation="vertical" defaultValue={45} marks={marks} /> 459 <RangeSlider orientation="vertical" defaultValue={[25, 65]} marks={marks} /> 460 </div> 461 ); 462} 463`,centered:!0},W={type:"code",component:function(){let[e,a]=(0,h.useState)(50);return(0,t.jsxs)(i.Box,{pb:"md",children:[(0,t.jsxs)(u.Text,{size:"sm",mb:"xs",children:["Hidden marks allow you to snap to specific values without displaying them visually. Current value: ",e]}
463),(0,t.jsx)(l.Slider,{value:e,onChange:a,min:0,max:100,step:1,restrictToMarks:!0,marks:[{value:0,label:"0%"},{value:25,hidden:!0},{value:50,label:"50%"},{value:75,hidden:!0},{value:100,label:"100%"}]})]})},code:` 464import { Slider, Text, Box } from '@mantine/core'; 465import { useState } from 'react'; 466 467function Demo() { 468 const [value, setValue] = useState(50); 469 470 return ( 471 <Box pb="md"> 472 <Text size="sm" mb="xs"> 473 Hidden marks allow you to snap to specific values without displaying them visually. Current 474 value: {value} 475 </Text> 476 <Slider 477 value={value} 478 onChange={setValue} 479 min={0} 480 max={100} 481 step={1} 482 restrictToMarks 483 marks={[ 484 { value: 0, label: '0%' }, 485 { value: 25, hidden: true }, 486 { value: 50, label: '50%' }, 487 { value: 75, hidden: true }, 488 { value: 100, label: '100%' }, 489 ]} 490 /> 491 </Box> 492 ); 493} 494`},I={type:"code",component:function(){return(0,t.jsx)(l.Slider,{startPointValue:-50,min:-100,max:100,defaultValue:40,mb:40,marks:[{value:-100,label:"-100"},{value:-50,label:"-50"},{value:0,label:"0"},{value:50,label:"50"},{value:100,label:"100"}]})},code:` 495import { Slider } from '@mantine/core'; 496 497function Demo() { 498 return ( 499 <Slider 500 startPointValue={0} 501 min={-100} 502 max={100} 503 defaultValue={40} 504 marks={[ 505 { value: -100, label: '-100' }, 506 { value: -50, label: '-50' }, 507 { value: 0, label: '0' }, 508 { value: 50, label: '50' }, 509 { value: 100, label: '100' }, 510 ]} 511 /> 512 ); 513} 514`,centered:!0,maxWidth:400};var H=(0,a.__exportAll)({changeEnd:()=>p,configurator:()=>r,customSlider:()=>L,customize:()=>o,decimal:()=>E,disabled:()=>v,domain:()=>_,hiddenMarks:()=>W,inverted:()=>A,label:()=>d,marks:()=>s,restrictToMarks:()=>N,scale:()=>w,startPoint:()=>I,step:()=>c,stylesApi:()=>C,thumbChildren:()=>y,thumbSize:()=>f,vertical:()=>P});e.s(["SliderDemos",0,H],76206)},328940,e=>{"use strict";var a=e.i(779177),l=e.i(433512),t=e.i(312773),r=e.i(481178),n=e.i(317477),i=e.i(44091),o=e.i(391466),s=e.i(275519),u=e.i(323283),d=e.i(55383),m=e.i(585968),c=e.i(782814),h=e.i(130624),p=e.i(23168),v=e.i(635961),f=e.i(846711),b=e.i(178372),x=e.i(229737),g=e.i(504297),k=e.i(191788),S=e.i(852361),y=e.i(332977),V=e.i(502315),j=e.i(579560),w=e.i(391398);let A=(0,r.createVarsResolver)((e,{size:t,color:r,thumbSize:i,radius:o})=>({root:{"--slider-size":(0,l.getSize)(t,"slider-size"),"--slider-color":r?(0,n.getThemeColor)(r,e):void 0,"--slider-radius":void 0===o?void 0:(0,l.getRadius)(o),"--slider-thumb-size":void 0!==i?(0,a.rem)(i):"calc(var(--slider-size) * 2)"}})),M={min:0,max:100,minRange:10,step:1,marks:[],label:e=>e,labelTransitionProps:{transition:"fade",duration:0},labelAlwaysOn:!1,showLabelOnHover:!0,disabled:!1,pushOnOverlap:!0,scale:e=>e,size:"md",maxRange:1/0},T=(0,s.factory)(e=>{let a=(0,i.useProps)("RangeSlider",M,e),{classNames:l,styles:r,value:n,onChange:s,onChangeEnd:T,size:C,min:E,max:D,domain:Z,minRange:F,maxRange:z,step:L,precision:R,defaultValue:N,name:_,marks:B,label:P,labelTransitionProps:W,labelAlwaysOn:I,thumbFromLabel:H,thumbToLabel:O,thumbValueText:$,showLabelOnHover:X,thumbChildren:K,disabled:U,unstyled:Y,scale:q,inverted:G,orientation:J,className:Q,style:ee,vars:ea,hiddenInputProps:el,restrictToMarks:et,thumbProps:er,pushOnOverlap:en,attributes:ei,ref:eo,...es}=a,eu=(0,o.useStyles)({name:"RangeSlider",props:a,classes:g.default,classNames:l,className:Q,styles:r,style:ee,attributes:ei,vars:ea,varsResolver:A,unstyled:Y}),ed=(0,k.useRef)(null),{dir:em}=(0,u.useDirection)(),[ec,eh]=(0,k.useState)(-1),[ep,ev]=(0,k.useState)(!1),[ef,eb]=(0,j.useUncontrolled)({value:n,defaultValue:N,finalValue:[E,D],onChange:s}),ex=(0,k.useRef)(ef),eg=(0,k.useRef)([]),ek=(0,k.useRef)(null),eS=(0,k.useRef)(void 0),[ey,eV]=Z||[E,D],ej=[(0,h.getPosition)({value:ef[0],min:ey,max:eV}),(0,h.getPosition)({value:ef[1],min:ey,max:eV})],ew=R??(0,b.getPrecision)(L);(0,k.useEffect)(()=>{Array.isArray(n)&&(ex.current=n)},Array.isArray(n)?[n[0],n[1]]:[null,null]);let eA=(e,a,l)=>{if(-1===a)return;let r=[...ex.current];
514if(et&&B){let l=(0,t.findClosestNumber)(e,B.map(e=>e.value)),n=r[a];r[a]=l;let i=+(0===a),o=(0,x.getLastMarkValue)(B),s=(0,x.getFirstMarkValue)(B);l===o&&r[i]===o||l===s&&r[i]===s?r[a]=n:l===r[i]&&(n>r[i]?r[i]=(0,x.getPreviousMarkValue)(l,B):r[i]=(0,x.getNextMarkValue)(l,B))}else{let l=(0,S.clamp)(e,E,D);r[a]=l,0===a&&(l>r[1]-(F-1e-9)&&(en?r[1]=Math.min(e+F,D):r[a]=ex.current[a]),l>(D-(F-1e-9)||E)&&(r[a]=ex.current[a]),r[1]-e>z&&(en?r[1]=e+z:r[a]=ex.current[a])),1===a&&(l<r[0]+F&&(en?r[0]=Math.max(e-F,E):r[a]=ex.current[a]),l<r[0]+F&&(r[a]=ex.current[a]),l-r[0]>z&&(en?r[0]=e-z:r[a]=ex.current[a]))}if(r[0]=(0,f.getFloatingValue)(r[0],ew),r[1]=(0,f.getFloatingValue)(r[1],ew),r[0]>r[1]){let e=r[0];r[0]=r[1],r[1]=e}eb(r),ex.current=r,l&&T?.(ex.current)},{ref:eM,active:eT}=(0,V.useMove)(({x:e,y:a})=>{var l;return l="vertical"===J?1-a:e,void(!U&&void 0!==eS.current&&eA((0,v.getChangeValue)({value:l,min:ey,max:eV,step:L,precision:ew}),eS.current,!1))},{onScrubEnd:()=>!U&&T?.(ex.current)},em),eC=e=>{if(ed.current){ed.current.focus();let a=ed.current.getBoundingClientRect(),l=function(e,a){if("TouchEvent"in window&&e instanceof window.TouchEvent){let l=e.touches[0];return"vertical"===a?l.clientY:l.clientX}return"vertical"===a?e.clientY:e.clientX}(e.nativeEvent,J),t="vertical"===J?(0,v.getChangeValue)({value:a.bottom-l,max:D,min:E,step:L,containerWidth:a.height}):(0,v.getChangeValue)({value:l-a.left,max:D,min:E,step:L,containerWidth:a.width}),r=+(Math.abs(ef[0]-t)>Math.abs(ef[1]-t));eS.current="vertical"===J||"ltr"===em?r:+(1!==r)}},eE=()=>1!==ec&&0!==ec?(eh(0),0):ec,eD={max:D,min:E,size:C,labelTransitionProps:W,labelAlwaysOn:I,orientation:J,onBlur:()=>eh(-1)},eZ=Array.isArray(K);return(0,w.jsx)(d.SliderProvider,{value:{getStyles:eu},children:(0,w.jsxs)(m.SliderRoot,{...es,size:C,ref:(0,y.useMergedRef)(eo,ek),disabled:U,orientation:J,onMouseDownCapture:()=>ek.current?.focus(),onKeyDownCapture:()=>{eg.current[0]?.parentElement?.contains(document.activeElement)||eg.current[0]?.focus()},children:[(0,w.jsxs)(p.Track,{offset:ej[0],marksOffset:ef[0],filled:ej[1]-ej[0],marks:B,inverted:G,min:ey,max:eV,value:ef[1],disabled:U,containerProps:{ref:(0,y.useMergedRef)(ed,eM),onMouseEnter:X?()=>ev(!0):void 0,onMouseLeave:X?()=>ev(!1):void 0,onTouchStartCapture:eC,onTouchEndCapture:()=>{eS.current=-1},onMouseDownCapture:eC,onMouseUpCapture:()=>{eS.current=-1},onKeyDownCapture:e=>{if(!U)switch(e.key){case"ArrowUp":{e.preventDefault();let a=eE();eg.current[a].focus();let l=et&&B?(0,x.getNextMarkValue)(ex.current[a],B):Math.min(Math.max(ex.current[a]+L,ey),eV);eA((0,f.getFloatingValue)(l,ew),a,!0);break}case"ArrowRight":{e.preventDefault();let a=eE();eg.current[a].focus();let l=et&&B?("rtl"===em?x.getPreviousMarkValue:x.getNextMarkValue)(ex.current[a],B):Math.min(Math.max("rtl"===em?ex.current[a]-L:ex.current[a]+L,ey),eV);eA((0,f.getFloatingValue)(l,ew),a,!0);break}case"ArrowDown":{e.preventDefault();let a=eE();eg.current[a].focus();let l=et&&B?(0,x.getPreviousMarkValue)(ex.current[a],B):Math.min(Math.max(ex.current[a]-L,ey),eV);eA((0,f.getFloatingValue)(l,ew),a,!0);break}case"ArrowLeft":{e.preventDefault();let a=eE();eg.current[a].focus();let l=et&&B?("rtl"===em?x.getNextMarkValue:x.getPreviousMarkValue)(ex.current[a],B):Math.min(Math.max("rtl"===em?ex.current[a]+L:ex.current[a]-L,ey),eV);eA((0,f.getFloatingValue)(l,ew),a,!0)}}}},children:[(0,w.jsx)(c.Thumb,{...eD,value:q(ef[0]),position:ej[0],dragging:eT,label:"function"==typeof P?P((0,f.getFloatingValue)(q(ef[0]),ew)):P,ref:e=>{e&&(eg.current[0]=e)},thumbLabel:H,thumbValueText:$,onMouseDown:()=>void(eS.current=0),onFocus:()=>eh(0),showLabelOnHover:X,isHovered:ep,disabled:U,...er?.(0),children:eZ?K[0]:K}),(0,w.jsx)(c.Thumb,{...eD,thumbLabel:O,value:q(ef[1]),position:ej[1],dragging:eT,label:"function"==typeof P?P((0,f.getFloatingValue)(q(ef[1]),ew)):P,ref:e=>{e&&(eg.current[1]=e)},thumbValueText:$,onMouseDown:()=>void(eS.current=1),onFocus:()=>eh(1),showLabelOnHover:X,isHovered:ep,disabled:U,...er?.(1),children:eZ?K[1]:K})]}),(0,w.jsx)("input",{type:"hidden",name:`${_}_from`,value:ef[0],...el}),(0,w.jsx)("input",{type:"hidden",name:`${_}_to`,value:ef[1],...el})]})})});T.classes=g.default,T.varsResolver=A,T.displayName="@mantine/core/RangeSlider",e.s(["RangeSlider",0,T],328940)}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.