{"version":3,"file":"Slider.jsx","names":["stylex","memo","useId","sliderConfig","state","controlColor","webkitThumb","firefoxThumb","webkitTack","firefoxTack","firefoxProgress","styles","create","base","width","margin","padding","appearance","backgroundColor","accentColor","sliderPassedTrackBackground","outline","cursor","default","thumbBackground","sliderThumbHoverBackground","sliderThumbDisabledBackground","trackBackground","sliderTrackBackground","sliderTrackDisabledBackground","progressBackground","sliderDisabledPassedTrackBackground","height","borderStyle","borderRadius","background","marginTop","trackHeight","trackBorderStyle","trackBorderRadius","Slider","t0","$","_c","name","disabled","defaultValue","value","onChange","min","max","step","list","markerId","t1","e","currentTarget","valueAsNumber","undefined","onChangeWrapped","t2","Symbol","for","props","t3","t4","t5","map","_temp","t6","value_0"],"sources":["../src/Slider.tsx"],"sourcesContent":["import * as stylex from \"@stylexjs/stylex\";\nimport { type FormEvent, memo, useId } from \"react\";\nimport { sliderConfig, state } from \"./Slider.vars.stylex\";\nimport { controlColor } from \"./theme.stylex\";\n\nconst webkitThumb = \"::-webkit-slider-thumb\";\nconst firefoxThumb = \"::-moz-range-thumb\";\n\nconst webkitTack = \"::-webkit-slider-runnable-track\";\nconst firefoxTack = \"::-moz-range-track\";\n\nconst firefoxProgress = \"::-moz-range-progress\";\n\n// Refs:\n// - https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/\n// - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/\n// - https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider\n\nconst styles = stylex.create({\n\tbase: {\n\t\twidth: \"100%\",\n\n\t\tmargin: 0,\n\t\tpadding: 0,\n\n\t\tappearance: \"none\", // Hides the slider so that custom slider can be made\n\t\tbackgroundColor: \"transparent\", // Otherwise white in Chrome\n\n\t\taccentColor: controlColor.sliderPassedTrackBackground,\n\n\t\toutline: {\n\t\t\t\":focus\": \"none\", // Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though.\n\t\t},\n\n\t\t[state.cursor]: {\n\t\t\tdefault: \"pointer\",\n\t\t\t\":disabled\": \"not-allowed\",\n\t\t},\n\n\t\t[state.thumbBackground]: {\n\t\t\tdefault: sliderConfig.thumbBackground,\n\t\t\t\":hover:not(:disabled)\": controlColor.sliderThumbHoverBackground,\n\t\t\t\":disabled\": controlColor.sliderThumbDisabledBackground,\n\t\t},\n\n\t\t[state.trackBackground]: {\n\t\t\tdefault: controlColor.sliderTrackBackground,\n\t\t\t\":disabled\": controlColor.sliderTrackDisabledBackground,\n\t\t},\n\n\t\t[state.progressBackground]: {\n\t\t\tdefault: controlColor.sliderPassedTrackBackground,\n\t\t\t\":disabled\": controlColor.sliderDisabledPassedTrackBackground,\n\t\t},\n\n\t\t[webkitThumb]: {\n\t\t\tappearance: \"none\",\n\n\t\t\tcursor: state.cursor,\n\n\t\t\twidth: sliderConfig.width,\n\t\t\theight: sliderConfig.height,\n\n\t\t\tborderStyle: sliderConfig.borderStyle,\n\t\t\tborderRadius: sliderConfig.borderRadius,\n\n\t\t\tbackground: state.thumbBackground,\n\n\t\t\t// This has to be a specified margin in Chrome, but in Firefox it is automatic\n\t\t\tmarginTop: `calc(-1* ${sliderConfig.height} / 3)`,\n\t\t},\n\n\t\t// Note: DON'T use comma-separated selectors here. It won't work, since a browser will drop the entire rule if it doesn't understand one part of it.\n\t\t[firefoxThumb]: {\n\t\t\tcursor: state.cursor,\n\n\t\t\twidth: sliderConfig.width,\n\t\t\theight: sliderConfig.height,\n\n\t\t\tborderStyle: sliderConfig.borderStyle,\n\t\t\tborderRadius: sliderConfig.borderRadius,\n\n\t\t\tbackground: state.thumbBackground,\n\t\t},\n\n\t\t[webkitTack]: {\n\t\t\twidth: \"100%\",\n\t\t\theight: sliderConfig.trackHeight,\n\n\t\t\tcursor: state.cursor,\n\n\t\t\tbackground: state.trackBackground,\n\n\t\t\tborderStyle: sliderConfig.trackBorderStyle,\n\t\t\tborderRadius: sliderConfig.trackBorderRadius,\n\t\t},\n\n\t\t[firefoxTack]: {\n\t\t\twidth: \"100%\",\n\t\t\theight: sliderConfig.trackHeight,\n\n\t\t\tcursor: state.cursor,\n\n\t\t\tbackground: state.trackBackground,\n\n\t\t\tborderStyle: sliderConfig.trackBorderStyle,\n\t\t\tborderRadius: sliderConfig.trackBorderRadius,\n\t\t},\n\n\t\t[firefoxProgress]: {\n\t\t\tbackground: state.progressBackground,\n\t\t},\n\t},\n});\n\nexport interface SliderProps {\n\tname?: string;\n\tdisabled?: boolean;\n\tdefaultValue?: number;\n\tvalue?: number;\n\tonChange?: (value: number) => void;\n\n\tmin?: number;\n\tmax?: number;\n\tstep?: number;\n\tlist?: number[];\n}\n\nexport default memo(function Slider({\n\tname,\n\tdisabled,\n\tdefaultValue,\n\tvalue,\n\tonChange,\n\n\tmin,\n\tmax,\n\tstep,\n\tlist,\n}: SliderProps) {\n\tconst markerId = useId();\n\n\tconst onChangeWrapped = onChange\n\t\t? (e: FormEvent<HTMLInputElement>) =>\n\t\t\t\tonChange?.(e.currentTarget.valueAsNumber)\n\t\t: undefined;\n\n\treturn (\n\t\t<>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\t{...stylex.props(styles.base)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tname={name}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\tstep={step}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChangeWrapped}\n\t\t\t\tlist={list && markerId}\n\t\t\t/>\n\t\t\t{list && (\n\t\t\t\t<datalist id={markerId}>\n\t\t\t\t\t{list.map((value) => (\n\t\t\t\t\t\t<option key={value} value={value} />\n\t\t\t\t\t))}\n\t\t\t\t</datalist>\n\t\t\t)}\n\t\t</>\n\t);\n});\n"],"mappings":"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","ignoreList":[]}