{"version":3,"file":"BudgetSlider._QDU-SfF.mjs","names":["useState","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/2LdX2izLiSxbAGbnYEr7/SzTl5D8Q5MwihotFLGmg/BudgetSlider.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useCallback,useEffect,useMemo,useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";function clamp(value,min,max){return Math.min(Math.max(value,min),max);}/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function BudgetSlider(props){const{min,max,step,defaultValue,name,currencyPrefix,maxSuffix,accentColor,trackColor,handleColor,textColor,minLabelFont,valueFont,style}=props;const safeMin=Math.min(min,max);const safeMax=Math.max(min,max);const safeStep=step>0?step:1;const initialValue=clamp(defaultValue,safeMin,safeMax);const[currentValue,setCurrentValue]=useState(initialValue);useEffect(()=>{const nextValue=clamp(defaultValue,safeMin,safeMax);startTransition(()=>setCurrentValue(nextValue));},[defaultValue,safeMin,safeMax]);const numberFormatter=useMemo(()=>new Intl.NumberFormat(\"en-GB\"),[]);const formattedMin=useMemo(()=>{return`${currencyPrefix}${numberFormatter.format(safeMin)}`;},[currencyPrefix,numberFormatter,safeMin]);const formattedCurrent=useMemo(()=>{const suffix=currentValue>=safeMax?maxSuffix:\"\";return`${currencyPrefix}${numberFormatter.format(currentValue)}${suffix}`;},[currencyPrefix,currentValue,maxSuffix,numberFormatter,safeMax]);const progressPercent=useMemo(()=>{const range=safeMax-safeMin;if(range<=0)return 100;return(currentValue-safeMin)/range*100;},[currentValue,safeMax,safeMin]);const onRangeChange=useCallback(event=>{const nextValue=clamp(Number(event.target.value),safeMin,safeMax);startTransition(()=>setCurrentValue(nextValue));},[safeMax,safeMin]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:52,display:\"flex\",flexDirection:\"column\",justifyContent:\"space-between\",gap:12,borderRadius:0,...style},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                .budget-slider-range {\n                    -webkit-appearance: none;\n                    appearance: none;\n                    width: 100%;\n                    margin: 0;\n                    height: 16px;\n                    background: transparent;\n                    cursor: pointer;\n                }\n\n                .budget-slider-range:focus {\n                    outline: none;\n                }\n\n                .budget-slider-range::-webkit-slider-runnable-track {\n                    height: 4px;\n                    border-radius: 999px;\n                    background: linear-gradient(\n                        to right,\n                        var(--slider-accent) 0%,\n                        var(--slider-accent) var(--slider-progress),\n                        var(--slider-track) var(--slider-progress),\n                        var(--slider-track) 100%\n                    );\n                }\n\n                .budget-slider-range::-webkit-slider-thumb {\n                    -webkit-appearance: none;\n                    appearance: none;\n                    width: 16px;\n                    height: 16px;\n                    border-radius: 50%;\n                    background: var(--slider-handle);\n                    border: none;\n                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n                    margin-top: -6px;\n                }\n\n                .budget-slider-range::-moz-range-track {\n                    height: 4px;\n                    border: none;\n                    border-radius: 999px;\n                    background: var(--slider-track);\n                }\n\n                .budget-slider-range::-moz-range-progress {\n                    height: 4px;\n                    border-radius: 999px;\n                    background: var(--slider-accent);\n                }\n\n                .budget-slider-range::-moz-range-thumb {\n                    width: 16px;\n                    height: 16px;\n                    border-radius: 50%;\n                    border: none;\n                    background: var(--slider-handle);\n                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n                }\n            `}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"space-between\",alignItems:\"baseline\",width:\"100%\",minWidth:0,fontFamily:\"Inter, sans-serif\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,whiteSpace:\"nowrap\",fontSize:minLabelFont.fontSize,lineHeight:minLabelFont.lineHeight,letterSpacing:minLabelFont.letterSpacing,fontWeight:minLabelFont.fontWeight,fontStyle:minLabelFont.fontStyle,fontFamily:minLabelFont.fontFamily,textAlign:minLabelFont.textAlign},children:formattedMin}),/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,whiteSpace:\"nowrap\",fontSize:valueFont.fontSize,lineHeight:valueFont.lineHeight,letterSpacing:valueFont.letterSpacing,fontWeight:valueFont.fontWeight,fontStyle:valueFont.fontStyle,fontFamily:valueFont.fontFamily,textAlign:valueFont.textAlign},children:formattedCurrent})]}),/*#__PURE__*/_jsx(\"input\",{className:\"budget-slider-range\",type:\"range\",min:safeMin,max:safeMax,step:safeStep,value:currentValue,name:name,\"aria-label\":name,onChange:onRangeChange,style:{\"--slider-progress\":`${progressPercent}%`,\"--slider-accent\":accentColor,\"--slider-track\":trackColor,\"--slider-handle\":handleColor}})]});}addPropertyControls(BudgetSlider,{min:{type:ControlType.Number,title:\"Min\",defaultValue:1e3,min:0,step:100},max:{type:ControlType.Number,title:\"Max\",defaultValue:2e4,min:0,step:100},step:{type:ControlType.Number,title:\"Step\",defaultValue:500,min:1,step:100},defaultValue:{type:ControlType.Number,title:\"Default\",defaultValue:5e3,min:0,step:100},name:{type:ControlType.String,title:\"Name\",defaultValue:\"Budget\"},currencyPrefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\\xa3\"},maxSuffix:{type:ControlType.String,title:\"Max Suffix\",defaultValue:\"+\"},accentColor:{type:ControlType.Color,title:\"Accent\",defaultValue:\"#E1306C\"},trackColor:{type:ControlType.Color,title:\"Track\",defaultValue:\"rgba(255,255,255,0.2)\"},handleColor:{type:ControlType.Color,title:\"Handle\",defaultValue:\"#FFFFFF\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#FFFFFF\"},minLabelFont:{type:ControlType.Font,title:\"Min Font\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},valueFont:{type:ControlType.Font,title:\"Value Font\",defaultValue:{fontSize:\"16px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BudgetSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BudgetSlider.map"],"mappings":"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"}