/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h2: "h2", pre: "pre", code: "code" }, _provideComponents(), props.components), {PostImage} = _components; if (!PostImage) _missingMdxReference("PostImage", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { children: "Demo" }), "\n", _jsx(PostImage, { src: "/images/snippets/slider-demo.png", width: 448, height: 120, alt: "slider-demo" }), "\n", _jsx(_components.h2, { children: "Code" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "import { useRef, useState } from 'react';\n\nconst clamp = ({ value, min, max }) => {\n return Math.min(Math.max(value, min), max);\n};\n\nexport default function Slider(props) {\n const { min = 0, max = 100 } = props;\n\n const sliderRef = useRef();\n const [isDragging, setIsDragging] = useState(false);\n const [progress, setProgress] = useState(0);\n\n const onMouseMove = (event) => {\n event.stopPropagation();\n\n if (isDragging) {\n const { left, width } = sliderRef?.current?.getBoundingClientRect();\n\n const _x = clamp({ value: (event.clientX - left) / width, min: 0, max: 1 });\n let value = (_x * 100).toFixed(1);\n\n if (value < min) value = min;\n if (value > max) value = max;\n\n setProgress(value);\n }\n };\n\n const onMouseDown = (event) => {\n setIsDragging(true);\n event.stopPropagation();\n };\n\n const onMouseUp = (event) => {\n setIsDragging(false);\n event.stopPropagation();\n };\n\n return (\n

\n \n

\n setIsDragging(false)}\n onMouseUp={onMouseUp}\n onMouseDown={onMouseDown}\n onMouseMove={onMouseMove}\n className=\"absolute -bottom-2.5 -translate-x-1/2 transform\"\n style={{ left: `${progress}%` }}\n >\n \n\n {`${progress}%`}\n \n

\n );\n}\n" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }