1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[96042],{82252:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/rangeinputs",function(){return n(71949)}])},46382:function(e,s,n){"use strict";n.d(s,{Z:function(){return r}});var a=n(85893),l=n(67294),c=n(51136),t=n(41664),i=n.n(t);function r(e){var s=(0,l.useContext)(c.K),n=e.title||"",t=e.small,r=n.toLowerCase().replace(/\s+/g,"").replace(/[^a-z0-9-_]/gi,""),d=e.level||2,o=function(){var e=window.location.href,n=e.indexOf("#");-1!==n&&(e=e.substring(0,n)),s.openToastr({size:"medium",text:"URL copied to your clipboard",color:"green",autoDelete:!0,autoDeleteDelay:2500}),navigator.clipboard.writeText("".concat(e,"#").concat(r))};return(0,a.jsxs)("div",{className:"flex items-center gap-2 group ".concat(2===d?"mb-3":""," ").concat(3===d?"mb-2":""),id:r,children:[(0,a.jsx)(i(),{href:"#".concat(r),children:(0,a.jsxs)("button",{type:"button",className:"interactive",onClick:o,children:[2===d&&(0,a.jsxs)("h2",{className:"h3",children:[n,t&&(0,a.jsxs)(a.Fragment,{children:[" ",(0,a.jsx)("small",{className:"text-ui-300",children:t})]})]}),3===d&&(0,a.jsxs)("h3",{className:"h5",children:[n,t&&(0,a.jsxs)(a.Fragment,{children:[" ",(0,a.jsx)("small",{className:"text-ui-300",children:t})]})]})]})}),(0,a.jsx)(i(),{href:"#".concat(r),children:(0,a.jsx)("button",{type:"button",className:"button button-sm button-secondary rounded-full opacity-0 group-hover:opacity-100",onClick:o,children:(0,a.jsx)("span",{className:"icon icon-url"})})})]})}},71949:function(e,s,n){"use strict";n.r(s);var a=n(85893),l=n(67294),c=n(92466),t=n(46382),i=function(){var e=(0,l.useState)(null),s=(e[0],e[1]);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("h1",{className:"mb-8",children:"Range"}),(0,a.jsxs)("div",{className:"mb-12",children:[(0,a.jsx)(t.Z,{title:"Structure"}),(0,a.jsx)("div",{className:"surface rounded-lg p-4",children:(0,a.jsx)("div",{className:"",children:(0,a.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row lg:items-center",children:[(0,a.jsx)("div",{className:"flex-1 space-y-4",children:(0,a.jsx)("div",{className:"w-full flex gap-4 items-center",children:(0,a.jsx)("div",{className:"flex-1 space-y-4",children:(0,a.jsx)("input",{type:"range",className:"form-range",min:"0",max:"100",onChange:function(e){return s(e.target.value)}})})})}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/aLy8gzcu/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"})})]})})})]}),(0,a.jsxs)("div",{className:"mb-12",children:[(0,a.jsx)(t.Z,{title:"With ticks"}),(0,a.jsx)("div",{className:"surface rounded-lg p-4",children:(0,a.jsx)("div",{className:"",children:(0,a.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row lg:items-center",children:[(0,a.jsx)("div",{className:"flex-1 space-y-4",children:(0,a.jsx)("div",{className:"w-full flex gap-4 items-center",children:(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsx)("input",{type:"range",className:"form-range",min:"0",max:"100",step:"25",onChange:function(e){return s(e.target.value)}}),(0,a.jsxs)("div",{className:"w-full flex justify-between text-xs text-ui-400 px-2",children:[(0,a.jsx)("span",{children:"|"}),(0,a.jsx)("span",{children:"|"}),(0,a.jsx)("span",{children:"|"}),(0,a.jsx)("span",{children:"|"}),(0,a.jsx)("span",{children:"|"})]})]})})}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/uawsqjtm/embedded/html/dark/?bodyColor=212333&menuColor=1C1D2C&fontColor=FFFFFF&accentColor=F3C351"})})]})})})]})]})};i.getLayout=c.G,s.default=i}},function(e){e.O(0,[41664,92466,49774,92888,40179],(function(){return s=82252,e(e.s=s);var s}));var s=e.O();_N_E=s}]);
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.