@chayns-components/core 5.0.0-beta.655 → 5.0.0-beta.657

package/lib/cjs/components/slider/Slider.js

@@ -26,6 +26,7 @@ const Slider = ({
   const [fromValue, setFromValue] = (0, _react.useState)(0);
   const [toValue, setToValue] = (0, _react.useState)(maxValue);
   const [thumbWidth, setThumbWidth] = (0, _react.useState)(20);
+  const [isBigSlider, setIsBigSlider] = (0, _react.useState)(false);
   const fromSliderRef = (0, _react.useRef)(null);
   const toSliderRef = (0, _react.useRef)(null);
   const fromSliderThumbRef = (0, _react.useRef)(null);
@@ -156,19 +157,50 @@ const Slider = ({
   }, [handleControlFromSlider, interval, onChange]);
   const fromSliderThumbPosition = (0, _react.useMemo)(() => {
     if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
-      return (fromValue - minValue) / (maxValue - minValue) * (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2) - (shouldShowThumbLabel && fromValue === maxValue ? 4 : 0);
+      return (0, _slider.calculateGradientOffset)({
+        max: maxValue,
+        min: minValue,
+        value: fromValue,
+        thumbWidth: fromSliderThumbRef.current.offsetWidth,
+        containerWidth: fromSliderRef.current.offsetWidth
+      });
     }
     return 0;
-  }, [fromValue, maxValue, minValue, shouldShowThumbLabel, sliderWrapperSize]);
+  }, [fromValue, maxValue, minValue, sliderWrapperSize]);
   const toSliderThumbPosition = (0, _react.useMemo)(() => {
     if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {
-      return (toValue - minValue) / (maxValue - minValue) * (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2) - (shouldShowThumbLabel && toValue === maxValue ? 4 : 0);
+      return (0, _slider.calculateGradientOffset)({
+        max: maxValue,
+        min: minValue,
+        value: toValue,
+        thumbWidth: toSliderThumbRef.current.offsetWidth,
+        containerWidth: toSliderRef.current.offsetWidth
+      });
     }
     return 0;
-  }, [toValue, minValue, maxValue, shouldShowThumbLabel, sliderWrapperSize]);
+  }, [toValue, minValue, maxValue, sliderWrapperSize]);
+  const handleTouchStart = (0, _react.useCallback)(() => {
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(true);
+    }
+  }, [shouldShowThumbLabel]);
+  const handleTouchEnd = (0, _react.useCallback)(() => {
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(false);
+    }
+  }, [shouldShowThumbLabel]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Slider.StyledSlider, {
     ref: sliderWrapperRef
   }, /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
     $thumbWidth: thumbWidth,
     ref: fromSliderRef,
     $isInterval: !!interval,
@@ -177,6 +209,8 @@ const Slider = ({
     step: steps,
     max: maxValue,
     min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
     onChange: handleInputChange,
     onMouseUp: handleMouseUp,
     $max: maxValue,
@@ -184,11 +218,22 @@ const Slider = ({
     $value: fromValue
   }), /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
     ref: fromSliderThumbRef,
-    $position: fromSliderThumbPosition
+    $position: fromSliderThumbPosition,
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
     ref: toSliderThumbRef,
-    $position: toSliderThumbPosition
+    $position: toSliderThumbPosition,
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
     $thumbWidth: thumbWidth,
     $max: maxValue,
     $min: minValue,
@@ -200,9 +245,11 @@ const Slider = ({
     step: steps,
     max: maxValue,
     min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
     onChange: handleControlToSlider,
     onMouseUp: handleMouseUp
-  })), [thumbWidth, interval, fromValue, steps, maxValue, minValue, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
+  })), [isBigSlider, thumbWidth, interval, fromValue, steps, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
 };
 Slider.displayName = 'Slider';
 var _default = exports.default = Slider;

package/lib/cjs/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","offsetWidth","toSliderThumbPosition","createElement","StyledSlider","ref","StyledSliderInput","$thumbWidth","$isInterval","type","step","max","min","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","StyledSliderThumbLabel","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { fillSlider, getThumbMaxWidth } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     *\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return (\n                ((fromValue - minValue) / (maxValue - minValue)) *\n                    (fromSliderRef.current.offsetWidth -\n                        fromSliderThumbRef.current.offsetWidth / 2) -\n                (shouldShowThumbLabel && fromValue === maxValue ? 4 : 0)\n            );\n        }\n        return 0;\n    }, [fromValue, maxValue, minValue, shouldShowThumbLabel, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return (\n                ((toValue - minValue) / (maxValue - minValue)) *\n                    (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2) -\n                (shouldShowThumbLabel && toValue === maxValue ? 4 : 0)\n            );\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, shouldShowThumbLabel, sliderWrapperSize]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    $thumbWidth={thumbWidth}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb ref={fromSliderThumbRef} $position={fromSliderThumbPosition}>\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb ref={toSliderThumbRef} $position={toSliderThumbPosition}>\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        $thumbWidth={thumbWidth}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            thumbWidth,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","offsetWidth","containerWidth","toSliderThumbPosition","handleTouchStart","handleTouchEnd","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { calculateGradientOffset, fillSlider, getThumbMaxWidth } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     *\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: fromSliderThumbRef.current.offsetWidth,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: toSliderThumbRef.current.offsetWidth,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={thumbWidth}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={thumbWidth}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            thumbWidth,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
     width: 100%;
     height: 30px;
@@ -17,7 +19,7 @@ const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
     touch-action: none;
     user-select: none;
 `;
-const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.input.attrs(({
+const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_framerMotion.motion.input).attrs(({
   $isInterval,
   $value,
   $thumbWidth,
@@ -42,7 +44,7 @@ const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.
     position: absolute;
     border-radius: 100px;
     -webkit-appearance: none;
-    height: 10px;
+
     outline: none;
     cursor: pointer !important;
     z-index: 2;
@@ -92,6 +94,41 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
     justify-content: center;
     padding: 0 8px;
     white-space: nowrap;
+    top: 5px;
+
+    transition: top 0.2s ease 0s;
+
+    ${({
+  $isBigSlider
+}) => $isBigSlider && (0, _styledComponents.css)`
+            top: -30px;
+
+            &::after {
+                background-color: inherit;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                border-right: 1px solid rgba(0, 0, 0, 0.1);
+                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+                content: '';
+                height: 14px;
+                position: absolute;
+                width: 14px;
+                z-index: -2;
+
+                transform: rotate(225deg);
+                bottom: -7px;
+            }
+
+            &::before {
+                background-color: inherit;
+                bottom: 0;
+                content: '';
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+                z-index: -1;
+            }
+        `}
 `;
 const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span`
     pointer-events: none;

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled.input.attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,KAAK,CAACC,KAAK,CAC/C,CAAC;EAAEC,WAAW;EAAEC,MAAM;EAAEC,WAAW;EAAEC,IAAI;EAAEC,IAAI;EAAEC;AAAM,CAAC,MAAM;EAC1DC,KAAK,EAAE;IACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;IAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;IAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACC,GAAG,CAACG,KAAK,CAAyB,CAAC;EAAEa;AAAU,CAAC,MAAM;EAC1FN,KAAK,EAAE;IACHO,IAAI,EAAE,GAAGD,SAAS;EACtB;AACJ,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAApB,OAAA,CAAAoB,sBAAA,GAAGnB,yBAAM,CAACoB,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","$isBigSlider","css","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/slider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThumbMaxWidth = exports.fillSlider = void 0;
+exports.getThumbMaxWidth = exports.fillSlider = exports.calculateGradientOffset = void 0;
 const fillSlider = ({
   fromSlider,
   toSlider,
@@ -33,6 +33,18 @@ const fillSlider = ({
   fromSlider.style.background = gradient;
 };
 exports.fillSlider = fillSlider;
+const calculateGradientOffset = ({
+  value,
+  min,
+  max,
+  thumbWidth,
+  containerWidth
+}) => {
+  const percentage = (value - min) / (max - min);
+  const adjustedWidth = containerWidth - thumbWidth * 0.25;
+  return percentage * adjustedWidth;
+};
+exports.calculateGradientOffset = calculateGradientOffset;
 const getThumbMaxWidth = ({
   maxNumber,
   thumbLabelFormatter

package/lib/cjs/utils/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '0 8px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":";;;;;;AAQO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EACvE,MAAMC,aAAa,GAAGC,MAAM,CAACH,QAAQ,CAACI,GAAG,CAAC,GAAGD,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACJ,UAAU,CAACQ,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACpE,MAAMG,UAAU,GAAGL,MAAM,CAACH,QAAQ,CAACO,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EAEhE,MAAMI,eAAe,GAAGR,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMS,UAAU,GAAGT,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACQ,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAG;AACrB;AACA,QAAQF,eAAe;AACvB,QAAQA,eAAe,IAAKH,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC/D,QAAQQ,UAAU,IAAKJ,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC1D,QAAQQ,UAAU,IAAKF,UAAU,GAAGN,aAAa,GAAI,GAAG;AACxD,QAAQO,eAAe,IAAKD,UAAU,GAAGN,aAAa,GAAI,GAAG;AAC7D,QAAQO,eAAe,QAAQ;;EAE3B;EACA;EACAT,QAAQ,CAACY,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpC;EACAZ,UAAU,CAACa,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAACG,OAAA,CAAAhB,UAAA,GAAAA,UAAA;AAOK,MAAMiB,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6C,CAAC,KAAK;EAC7F,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE9CF,OAAO,CAACN,KAAK,CAACS,MAAM,GAAG,MAAM;EAC7BH,OAAO,CAACN,KAAK,CAACU,OAAO,GAAG,MAAM;EAC9BJ,OAAO,CAACN,KAAK,CAACW,OAAO,GAAG,OAAO;EAC/BL,OAAO,CAACN,KAAK,CAACY,UAAU,GAAG,QAAQ;EACnCN,OAAO,CAACN,KAAK,CAACa,QAAQ,GAAG,MAAM;EAC/BP,OAAO,CAACN,KAAK,CAACc,OAAO,GAAG,GAAG;EAC3BR,OAAO,CAACN,KAAK,CAACe,QAAQ,GAAG,UAAU;EAEnCT,OAAO,CAACU,WAAW,GACf,OAAOX,mBAAmB,KAAK,UAAU,GACnCA,mBAAmB,CAACD,SAAS,CAAC,GAC9Ba,MAAM,CAACb,SAAS,CAAC;EAE3BG,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,OAAO,CAAC;EAElC,MAAMc,KAAK,GAAGd,OAAO,CAACe,WAAW;EAEjCd,QAAQ,CAACW,IAAI,CAACI,WAAW,CAAChB,OAAO,CAAC;EAElC,OAAOc,KAAK;AAChB,CAAC;AAAClB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA","ignoreList":[]}
+{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth * 0.25;\n\n    return percentage * adjustedWidth;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '0 8px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":";;;;;;AAQO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAkB,CAAC,KAAK;EACvE,MAAMC,aAAa,GAAGC,MAAM,CAACH,QAAQ,CAACI,GAAG,CAAC,GAAGD,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACJ,UAAU,CAACQ,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACpE,MAAMG,UAAU,GAAGL,MAAM,CAACH,QAAQ,CAACO,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EAEhE,MAAMI,eAAe,GAAGR,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMS,UAAU,GAAGT,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACQ,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAG;AACrB;AACA,QAAQF,eAAe;AACvB,QAAQA,eAAe,IAAKH,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC/D,QAAQQ,UAAU,IAAKJ,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC1D,QAAQQ,UAAU,IAAKF,UAAU,GAAGN,aAAa,GAAI,GAAG;AACxD,QAAQO,eAAe,IAAKD,UAAU,GAAGN,aAAa,GAAI,GAAG;AAC7D,QAAQO,eAAe,QAAQ;;EAE3B;EACA;EACAT,QAAQ,CAACY,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpC;EACAZ,UAAU,CAACa,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAACG,OAAA,CAAAhB,UAAA,GAAAA,UAAA;AAUK,MAAMiB,uBAAuB,GAAGA,CAAC;EACpCR,KAAK;EACLF,GAAG;EACHD,GAAG;EACHY,UAAU;EACVC;AACqB,CAAC,KAAa;EACnC,MAAMC,UAAU,GAAG,CAACX,KAAK,GAAGF,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;EAE9C,MAAMc,aAAa,GAAGF,cAAc,GAAGD,UAAU,GAAG,IAAI;EAExD,OAAOE,UAAU,GAAGC,aAAa;AACrC,CAAC;AAACL,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAOK,MAAMK,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6C,CAAC,KAAK;EAC7F,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE9CF,OAAO,CAACX,KAAK,CAACc,MAAM,GAAG,MAAM;EAC7BH,OAAO,CAACX,KAAK,CAACe,OAAO,GAAG,MAAM;EAC9BJ,OAAO,CAACX,KAAK,CAACgB,OAAO,GAAG,OAAO;EAC/BL,OAAO,CAACX,KAAK,CAACiB,UAAU,GAAG,QAAQ;EACnCN,OAAO,CAACX,KAAK,CAACkB,QAAQ,GAAG,MAAM;EAC/BP,OAAO,CAACX,KAAK,CAACmB,OAAO,GAAG,GAAG;EAC3BR,OAAO,CAACX,KAAK,CAACoB,QAAQ,GAAG,UAAU;EAEnCT,OAAO,CAACU,WAAW,GACf,OAAOX,mBAAmB,KAAK,UAAU,GACnCA,mBAAmB,CAACD,SAAS,CAAC,GAC9Ba,MAAM,CAACb,SAAS,CAAC;EAE3BG,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,OAAO,CAAC;EAElC,MAAMc,KAAK,GAAGd,OAAO,CAACe,WAAW;EAEjCd,QAAQ,CAACW,IAAI,CAACI,WAAW,CAAChB,OAAO,CAAC;EAElC,OAAOc,KAAK;AAChB,CAAC;AAACvB,OAAA,CAAAM,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/lib/esm/components/slider/Slider.js

@@ -2,7 +2,7 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/useElementSize';
-import { fillSlider, getThumbMaxWidth } from '../../utils/slider';
+import { calculateGradientOffset, fillSlider, getThumbMaxWidth } from '../../utils/slider';
 import { StyledSlider, StyledSliderInput, StyledSliderThumb, StyledSliderThumbLabel } from './Slider.styles';
 const Slider = _ref => {
   let {
@@ -19,6 +19,7 @@ const Slider = _ref => {
   const [fromValue, setFromValue] = useState(0);
   const [toValue, setToValue] = useState(maxValue);
   const [thumbWidth, setThumbWidth] = useState(20);
+  const [isBigSlider, setIsBigSlider] = useState(false);
   const fromSliderRef = useRef(null);
   const toSliderRef = useRef(null);
   const fromSliderThumbRef = useRef(null);
@@ -148,19 +149,50 @@ const Slider = _ref => {
   }, [handleControlFromSlider, interval, onChange]);
   const fromSliderThumbPosition = useMemo(() => {
     if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
-      return (fromValue - minValue) / (maxValue - minValue) * (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2) - (shouldShowThumbLabel && fromValue === maxValue ? 4 : 0);
+      return calculateGradientOffset({
+        max: maxValue,
+        min: minValue,
+        value: fromValue,
+        thumbWidth: fromSliderThumbRef.current.offsetWidth,
+        containerWidth: fromSliderRef.current.offsetWidth
+      });
     }
     return 0;
-  }, [fromValue, maxValue, minValue, shouldShowThumbLabel, sliderWrapperSize]);
+  }, [fromValue, maxValue, minValue, sliderWrapperSize]);
   const toSliderThumbPosition = useMemo(() => {
     if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {
-      return (toValue - minValue) / (maxValue - minValue) * (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2) - (shouldShowThumbLabel && toValue === maxValue ? 4 : 0);
+      return calculateGradientOffset({
+        max: maxValue,
+        min: minValue,
+        value: toValue,
+        thumbWidth: toSliderThumbRef.current.offsetWidth,
+        containerWidth: toSliderRef.current.offsetWidth
+      });
     }
     return 0;
-  }, [toValue, minValue, maxValue, shouldShowThumbLabel, sliderWrapperSize]);
+  }, [toValue, minValue, maxValue, sliderWrapperSize]);
+  const handleTouchStart = useCallback(() => {
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(true);
+    }
+  }, [shouldShowThumbLabel]);
+  const handleTouchEnd = useCallback(() => {
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(false);
+    }
+  }, [shouldShowThumbLabel]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledSlider, {
     ref: sliderWrapperRef
   }, /*#__PURE__*/React.createElement(StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
     $thumbWidth: thumbWidth,
     ref: fromSliderRef,
     $isInterval: !!interval,
@@ -169,6 +201,8 @@ const Slider = _ref => {
     step: steps,
     max: maxValue,
     min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
     onChange: handleInputChange,
     onMouseUp: handleMouseUp,
     $max: maxValue,
@@ -176,11 +210,22 @@ const Slider = _ref => {
     $value: fromValue
   }), /*#__PURE__*/React.createElement(StyledSliderThumb, {
     ref: fromSliderThumbRef,
-    $position: fromSliderThumbPosition
+    $position: fromSliderThumbPosition,
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/React.createElement(StyledSliderThumb, {
     ref: toSliderThumbRef,
-    $position: toSliderThumbPosition
+    $position: toSliderThumbPosition,
+    $isBigSlider: isBigSlider
   }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/React.createElement(StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
     $thumbWidth: thumbWidth,
     $max: maxValue,
     $min: minValue,
@@ -192,9 +237,11 @@ const Slider = _ref => {
     step: steps,
     max: maxValue,
     min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
     onChange: handleControlToSlider,
     onMouseUp: handleMouseUp
-  })), [thumbWidth, interval, fromValue, steps, maxValue, minValue, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
+  })), [isBigSlider, thumbWidth, interval, fromValue, steps, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
 };
 Slider.displayName = 'Slider';
 export default Slider;

package/lib/esm/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","offsetWidth","toSliderThumbPosition","createElement","ref","$thumbWidth","$isInterval","type","step","max","min","onMouseUp","$max","$min","$value","$position","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { fillSlider, getThumbMaxWidth } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     *\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return (\n                ((fromValue - minValue) / (maxValue - minValue)) *\n                    (fromSliderRef.current.offsetWidth -\n                        fromSliderThumbRef.current.offsetWidth / 2) -\n                (shouldShowThumbLabel && fromValue === maxValue ? 4 : 0)\n            );\n        }\n        return 0;\n    }, [fromValue, maxValue, minValue, shouldShowThumbLabel, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return (\n                ((toValue - minValue) / (maxValue - minValue)) *\n                    (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2) -\n                (shouldShowThumbLabel && toValue === maxValue ? 4 : 0)\n            );\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, shouldShowThumbLabel, sliderWrapperSize]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    $thumbWidth={thumbWidth}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb ref={fromSliderThumbRef} $position={fromSliderThumbPosition}>\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb ref={toSliderThumbRef} $position={toSliderThumbPosition}>\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        $thumbWidth={thumbWidth}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            thumbWidth,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACjG,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,UAAU,EAAEC,gBAAgB,QAAQ,oBAAoB;AACjE,SACIC,YAAY,EACZC,iBAAiB,EACjBC,iBAAiB,EACjBC,sBAAsB,QACnB,iBAAiB;AA8CxB,MAAMC,MAAuB,GAAGC,IAAA,IAU1B;EAAA,IAV2B;IAC7BC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,mBAAmB;IACnBC,oBAAoB,GAAG,KAAK;IAC5BC,KAAK,GAAG;EACZ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,SAAS,EAAEC,YAAY,CAAC,GAAGrB,QAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGvB,QAAQ,CAACW,QAAQ,CAAC;EAChD,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAGzB,QAAQ,CAAC,EAAE,CAAC;EAEhD,MAAM0B,aAAa,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EACpD,MAAM4B,WAAW,GAAG5B,MAAM,CAAmB,IAAI,CAAC;EAClD,MAAM6B,kBAAkB,GAAG7B,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAM8B,gBAAgB,GAAG9B,MAAM,CAAiB,IAAI,CAAC;EACrD,MAAM+B,gBAAgB,GAAG/B,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAMgC,iBAAiB,GAAG7B,cAAc,CAAC4B,gBAAgB,CAAC;EAE1D,MAAME,KAAK,GAAG/B,QAAQ,CAAC,CAAC;EAExBJ,SAAS,CAAC,MAAM;IACZ,IAAIqB,oBAAoB,EAAE;MACtBO,aAAa,CAACrB,gBAAgB,CAAC;QAAE6B,SAAS,EAAEtB,QAAQ;QAAEM;MAAoB,CAAC,CAAC,CAAC;IACjF;EACJ,CAAC,EAAE,CAACN,QAAQ,EAAEO,oBAAoB,EAAED,mBAAmB,CAAC,CAAC;;EAEzD;AACJ;AACA;EACIpB,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOgB,KAAK,KAAK,QAAQ,EAAE;MAC3B;IACJ;IAEA,IAAIA,KAAK,IAAID,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,EAAE;MACxCU,YAAY,CAACR,KAAK,CAAC;IACvB;EACJ,CAAC,EAAE,CAACF,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC,CAAC;EAE/BhB,SAAS,CAAC,MAAM;IACZ,IAAIuB,SAAS,GAAGE,OAAO,EAAE;MACrBD,YAAY,CAACC,OAAO,CAAC;IACzB;IAEA,IAAIA,OAAO,GAAGF,SAAS,EAAE;MACrBG,UAAU,CAACH,SAAS,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,SAAS,EAAEE,OAAO,CAAC,CAAC;EAExB,MAAMY,aAAa,GAAGtC,WAAW,CAAC,MAAM;IACpC,KAAKF,uBAAuB,CAAC,IAAI,CAAC;IAElC,MAAMyC,IAAI,GAAGC,MAAM,CAACV,aAAa,CAACW,OAAO,EAAExB,KAAK,CAAC;IACjD,MAAMyB,EAAE,GAAGF,MAAM,CAACT,WAAW,CAACU,OAAO,EAAExB,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGuB,SAAS,GAAGJ,IAAI,EAC3BnB,QAAQ,GAAG;QAAEL,QAAQ,EAAE2B,EAAE;QAAE1B,QAAQ,EAAEuB;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;EACJ,CAAC,EAAE,CAACvB,QAAQ,EAAEF,QAAQ,CAAC,CAAC;EAExB,MAAM0B,uBAAuB,GAAG5C,WAAW,CACtC6C,KAAoC,IAAK;IACtC,IAAI,CAACf,aAAa,CAACW,OAAO,IAAI,CAACV,WAAW,CAACU,OAAO,EAAE;MAChD;IACJ;IAEAhB,YAAY,CAACe,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC7B,KAAK,CAAC,CAAC;IAExC,MAAMsB,IAAI,GAAGC,MAAM,CAACV,aAAa,CAACW,OAAO,CAACxB,KAAK,CAAC;IAChD,MAAMyB,EAAE,GAAGF,MAAM,CAACT,WAAW,CAACU,OAAO,CAACxB,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACwB,SAAS,EAAE;QAAE5B,QAAQ,EAAE2B,EAAE;QAAE1B,QAAQ,EAAEuB;MAAK,CAAC,CAAC;IACzD;IAEAhC,UAAU,CAAC;MACPwC,QAAQ,EAAEhB,WAAW,CAACU,OAAO;MAC7BO,UAAU,EAAElB,aAAa,CAACW,OAAO;MACjCL;IACJ,CAAC,CAAC;IAEF,IAAIG,IAAI,GAAGG,EAAE,EAAE;MACXZ,aAAa,CAACW,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAACP,EAAE,CAAC;IAC5C,CAAC,MAAM;MACHZ,aAAa,CAACW,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAACV,IAAI,CAAC;IAC9C;EACJ,CAAC,EACD,CAACpB,QAAQ,EAAEiB,KAAK,CACpB,CAAC;EAED,MAAMc,qBAAqB,GAAGlD,WAAW,CACpC6C,KAAoC,IAAK;IACtC,KAAK/C,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,CAACgC,aAAa,CAACW,OAAO,IAAI,CAACV,WAAW,CAACU,OAAO,EAAE;MAChD;IACJ;IAEAd,UAAU,CAACa,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC7B,KAAK,CAAC,CAAC;IAEtC,MAAMsB,IAAI,GAAGC,MAAM,CAACV,aAAa,CAACW,OAAO,CAACxB,KAAK,CAAC;IAChD,MAAMyB,EAAE,GAAGF,MAAM,CAACT,WAAW,CAACU,OAAO,CAACxB,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACwB,SAAS,EAAE;QAAE5B,QAAQ,EAAE2B,EAAE;QAAE1B,QAAQ,EAAEuB;MAAK,CAAC,CAAC;IACzD;IAEAhC,UAAU,CAAC;MACPwC,QAAQ,EAAEhB,WAAW,CAACU,OAAO;MAC7BO,UAAU,EAAElB,aAAa,CAACW,OAAO;MACjCL;IACJ,CAAC,CAAC;IAEF,IAAIG,IAAI,IAAIG,EAAE,EAAE;MACZX,WAAW,CAACU,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAACP,EAAE,CAAC;IAC1C,CAAC,MAAM;MACHX,WAAW,CAACU,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAACV,IAAI,CAAC;IAC5C;EACJ,CAAC,EACD,CAACpB,QAAQ,EAAEiB,KAAK,CACpB,CAAC;EAEDnC,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC6B,aAAa,CAACW,OAAO,IAAI,CAACV,WAAW,CAACU,OAAO,IAAI,CAACrB,QAAQ,EAAE;MAC7D;IACJ;IAEAK,YAAY,CAACL,QAAQ,CAACJ,QAAQ,CAAC;IAC/BW,UAAU,CAACP,QAAQ,CAACL,QAAQ,CAAC;IAE7Be,aAAa,CAACW,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAAC7B,QAAQ,CAACJ,QAAQ,CAAC;IACvDe,WAAW,CAACU,OAAO,CAACxB,KAAK,GAAGgC,MAAM,CAAC7B,QAAQ,CAACL,QAAQ,CAAC;IAErDR,UAAU,CAAC;MACPyC,UAAU,EAAElB,aAAa,CAACW,OAAO;MACjCM,QAAQ,EAAEhB,WAAW,CAACU,OAAO;MAC7BL;IACJ,CAAC,CAAC;IACF;IACA;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMe,iBAAiB,GAAGnD,WAAW,CAChC6C,KAAoC,IAAK;IACtC,KAAK/C,uBAAuB,CAAC,KAAK,CAAC;IAEnC,MAAMsD,QAAQ,GAAGZ,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC7B,KAAK,CAAC;IAE3C,IAAIG,QAAQ,EAAE;MACVwB,uBAAuB,CAACC,KAAK,CAAC;MAE9B;IACJ;IAEApB,YAAY,CAAC2B,QAAQ,CAAC;IAEtB,IAAIjC,QAAQ,EAAE;MACVA,QAAQ,CAACiC,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACR,uBAAuB,EAAExB,QAAQ,EAAED,QAAQ,CAChD,CAAC;EAED,MAAMkC,uBAAuB,GAAGnD,OAAO,CAAC,MAAM;IAC1C,IAAI4B,aAAa,CAACW,OAAO,IAAIT,kBAAkB,CAACS,OAAO,IAAIN,iBAAiB,EAAE;MAC1E,OACK,CAACX,SAAS,GAAGR,QAAQ,KAAKD,QAAQ,GAAGC,QAAQ,CAAC,IAC1Cc,aAAa,CAACW,OAAO,CAACa,WAAW,GAC9BtB,kBAAkB,CAACS,OAAO,CAACa,WAAW,GAAG,CAAC,CAAC,IAClDhC,oBAAoB,IAAIE,SAAS,KAAKT,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhE;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACS,SAAS,EAAET,QAAQ,EAAEC,QAAQ,EAAEM,oBAAoB,EAAEa,iBAAiB,CAAC,CAAC;EAE5E,MAAMoB,qBAAqB,GAAGrD,OAAO,CAAC,MAAM;IACxC,IAAI6B,WAAW,CAACU,OAAO,IAAIR,gBAAgB,CAACQ,OAAO,IAAIN,iBAAiB,EAAE;MACtE,OACK,CAACT,OAAO,GAAGV,QAAQ,KAAKD,QAAQ,GAAGC,QAAQ,CAAC,IACxCe,WAAW,CAACU,OAAO,CAACa,WAAW,GAAGrB,gBAAgB,CAACQ,OAAO,CAACa,WAAW,GAAG,CAAC,CAAC,IAC/EhC,oBAAoB,IAAII,OAAO,KAAKX,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9D;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACW,OAAO,EAAEV,QAAQ,EAAED,QAAQ,EAAEO,oBAAoB,EAAEa,iBAAiB,CAAC,CAAC;EAE1E,OAAOjC,OAAO,CACV,mBACIH,KAAA,CAAAyD,aAAA,CAAC/C,YAAY;IAACgD,GAAG,EAAEvB;EAAiB,gBAChCnC,KAAA,CAAAyD,aAAA,CAAC9C,iBAAiB;IACdgD,WAAW,EAAE9B,UAAW;IACxB6B,GAAG,EAAE3B,aAAc;IACnB6B,WAAW,EAAE,CAAC,CAACvC,QAAS;IACxBwC,IAAI,EAAC,OAAO;IACZ3C,KAAK,EAAEO,SAAU;IACjBqC,IAAI,EAAEtC,KAAM;IACZuC,GAAG,EAAE/C,QAAS;IACdgD,GAAG,EAAE/C,QAAS;IACdG,QAAQ,EAAEgC,iBAAkB;IAC5Ba,SAAS,EAAE1B,aAAc;IACzB2B,IAAI,EAAElD,QAAS;IACfmD,IAAI,EAAElD,QAAS;IACfmD,MAAM,EAAE3C;EAAU,CACrB,CAAC,eACFzB,KAAA,CAAAyD,aAAA,CAAC7C,iBAAiB;IAAC8C,GAAG,EAAEzB,kBAAmB;IAACoC,SAAS,EAAEf;EAAwB,GAC1E/B,oBAAoB,iBACjBvB,KAAA,CAAAyD,aAAA,CAAC5C,sBAAsB,QAClB,OAAOS,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACG,SAAS,CAAC,GAC9BA,SACc,CAEb,CAAC,EACnBJ,QAAQ,iBACLrB,KAAA,CAAAyD,aAAA,CAAC7C,iBAAiB;IAAC8C,GAAG,EAAExB,gBAAiB;IAACmC,SAAS,EAAEb;EAAsB,GACtEjC,oBAAoB,iBACjBvB,KAAA,CAAAyD,aAAA,CAAC5C,sBAAsB,QAClB,OAAOS,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACK,OAAO,CAAC,GAC5BA,OACc,CAEb,CACtB,EACAN,QAAQ,iBACLrB,KAAA,CAAAyD,aAAA,CAAC9C,iBAAiB;IACdgD,WAAW,EAAE9B,UAAW;IACxBqC,IAAI,EAAElD,QAAS;IACfmD,IAAI,EAAElD,QAAS;IACfmD,MAAM,EAAEzC,OAAQ;IAChB+B,GAAG,EAAE1B,WAAY;IACjB4B,WAAW,EAAE,CAAC,CAACvC,QAAS;IACxBwC,IAAI,EAAC,OAAO;IACZ3C,KAAK,EAAES,OAAQ;IACfmC,IAAI,EAAEtC,KAAM;IACZuC,GAAG,EAAE/C,QAAS;IACdgD,GAAG,EAAE/C,QAAS;IACdG,QAAQ,EAAE+B,qBAAsB;IAChCc,SAAS,EAAE1B;EAAc,CAC5B,CAEK,CACjB,EACD,CACIV,UAAU,EACVR,QAAQ,EACRI,SAAS,EACTD,KAAK,EACLR,QAAQ,EACRC,QAAQ,EACRmC,iBAAiB,EACjBb,aAAa,EACbe,uBAAuB,EACvB/B,oBAAoB,EACpBD,mBAAmB,EACnBkC,qBAAqB,EACrB7B,OAAO,EACPwB,qBAAqB,CAE7B,CAAC;AACL,CAAC;AAEDrC,MAAM,CAACwD,WAAW,GAAG,QAAQ;AAE7B,eAAexD,MAAM","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","max","min","offsetWidth","containerWidth","toSliderThumbPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { calculateGradientOffset, fillSlider, getThumbMaxWidth } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     *\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: fromSliderThumbRef.current.offsetWidth,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: toSliderThumbRef.current.offsetWidth,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={thumbWidth}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={thumbWidth}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            thumbWidth,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}