@veeqo/ui 13.11.2 → 13.12.1

package/dist/components/Slider/Slider.cjs

@@ -1,8 +1,12 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
+var SliderHandle = require('./components/SliderHandle/SliderHandle.cjs');
+var SliderTrack = require('./components/SliderTrack/SliderTrack.cjs');
+var useSliderDrag = require('./hooks/useSliderDrag.cjs');
+var useSliderKeyboard = require('./hooks/useSliderKeyboard.cjs');
+var Slider_module = require('./Slider.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,102 +19,60 @@ const generateClassNames = (prefix) => ({
     startSlider: prefix ? `${prefix}-start-slider` : undefined,
     endSlider: prefix ? `${prefix}-end-slider` : undefined,
 });
-const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassName, onSlideStart = () => { }, onSlideEnd = () => { }, }) => {
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [draggingSliderIndex, setDraggingSliderIndex] = React.useState(-1);
+/**
+ * Slider component for selecting a single value or a range of values.
+ * Supports value labels on hover/drag, disabled state, and optional fill visualization.
+ */
+const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassName, showFill = false, showValueLabel = false, disabled = false, ariaLabel = 'Slider', ariaLabelledBy, onSlideStart = () => { }, onSlideEnd = () => { }, }) => {
+    // Track which handle is being hovered/focused for value label display
+    const [hoveredHandle, setHoveredHandle] = React.useState(null);
+    const [focusedHandle, setFocusedHandle] = React.useState(null);
+    // DOM reference for drag calculations
     const containerRef = React.useRef(null);
-    const startSliderRef = React.useRef(null);
-    const endSliderRef = React.useRef(null);
+    // DOM references for focus during keyboard navigation
+    const startHandleRef = React.useRef(null);
+    const endHandleRef = React.useRef(null);
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const handleMouseMove = React.useCallback((e) => {
-        var _a;
-        if (!isDragging || !containerRef.current)
-            return;
-        const sliderValue = draggingSliderIndex > -1 ? value[draggingSliderIndex] : value;
-        const containerSize = containerRef.current.getBoundingClientRect();
-        // slider position relative to the container in percents
-        const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;
-        // current value by slider position
-        let newValue = (max - min) * (handleValue / 100) + min;
-        const diff = sliderValue - newValue;
-        // use to apply step to new value
-        if (diff > 0) {
-            newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;
-        }
-        if (diff < 0) {
-            newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;
-        }
-        if (sliderValue === newValue)
-            return;
-        if (newValue > max)
-            newValue = max;
-        if (newValue < min)
-            newValue = min;
-        if (Array.isArray(value)) {
-            if (draggingSliderIndex === 0 && newValue > value[1])
-                [, newValue] = value;
-            if (draggingSliderIndex === 1 && newValue < value[0])
-                [newValue] = value;
-        }
-        // used to fix 0.30000000000000004 problem
-        const decimalPlaces = step.toString().includes('.')
-            ? (_a = step.toString().split('.').pop()) === null || _a === undefined ? undefined : _a.length
-            : 0;
-        newValue = Number(newValue.toFixed(decimalPlaces));
-        let resultValue;
-        if (Array.isArray(value)) {
-            resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];
-        }
-        else {
-            resultValue = newValue;
-        }
-        onChange(resultValue);
-        if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {
-            if (draggingSliderIndex === 0)
-                setDraggingSliderIndex(1);
-            if (draggingSliderIndex === 1)
-                setDraggingSliderIndex(0);
-        }
-    }, [draggingSliderIndex, isDragging, max, min, onChange, step, value]);
-    const handleMouseUp = React.useCallback(() => {
-        setIsDragging(false);
-        onSlideEnd();
-    }, [onSlideEnd]);
-    const handleMouseDown = React.useCallback((e, index) => {
-        setIsDragging(true);
-        onSlideStart();
-        if (typeof index === 'number')
-            setDraggingSliderIndex(index);
-        e.preventDefault();
-    }, [onSlideStart]);
-    React.useEffect(() => {
-        const handleStartSliderMouseDown = (e) => handleMouseDown(e, Array.isArray(value) ? 0 : 1);
-        const handleEndSliderMouseDown = (e) => handleMouseDown(e, 1);
-        const startSliderEl = startSliderRef.current;
-        const endSliderEl = endSliderRef.current;
-        startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.addEventListener('mousedown', handleStartSliderMouseDown);
-        endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.addEventListener('mousedown', handleEndSliderMouseDown);
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.removeEventListener('mousedown', handleStartSliderMouseDown);
-            endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.removeEventListener('mousedown', handleEndSliderMouseDown);
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);
-    const renderSlider = (left, valueNow, index) => {
-        let sliderClassName;
-        if (typeof index === 'number') {
-            sliderClassName = buildClassnames.buildClassnames(index === 0
-                ? [classNames === null || classNames === undefined ? undefined : classNames.startSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.startSlider]
-                : [classNames === null || classNames === undefined ? undefined : classNames.endSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.endSlider]);
-        }
-        else {
-            sliderClassName = buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.slider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.slider]);
-        }
-        return (React__default.default.createElement(styled.SliderDiv, { role: "slider", ref: index === 1 ? endSliderRef : startSliderRef, className: sliderClassName, left: left, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": valueNow }));
+    const { isDraggingHandle, handleMouseDown } = useSliderDrag.useSliderDrag({
+        containerRef,
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange,
+        onSlideStart,
+        onSlideEnd,
+    });
+    const { handleKeyDown } = useSliderKeyboard.useSliderKeyboard({
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange,
+        setFocusedHandle,
+        startHandleRef,
+        endHandleRef,
+    });
+    const renderSlider = (horizontalPosition, valueNow, handle) => {
+        const isActive = isDraggingHandle === handle;
+        const sliderClassName = handle === 'start'
+            ? buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.startSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.startSlider])
+            : buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.endSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.endSlider]);
+        const isHovered = hoveredHandle === handle;
+        const isFocused = focusedHandle === handle;
+        const showLabel = showValueLabel && !disabled && (isActive || isHovered || isFocused);
+        return (React__default.default.createElement(SliderHandle.SliderHandle, { ref: handle === 'start' ? startHandleRef : endHandleRef, horizontalPosition: horizontalPosition, value: valueNow, min: min, max: max, disabled: disabled, isActive: isActive, showLabel: showLabel, className: sliderClassName, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, onMouseDown: handleMouseDown(handle), onMouseEnter: () => {
+                if (disabled)
+                    return;
+                setHoveredHandle(handle);
+            }, onMouseLeave: () => setHoveredHandle(null), onFocus: () => {
+                if (disabled)
+                    return;
+                setFocusedHandle(handle);
+            }, onBlur: () => setFocusedHandle(null), onKeyDown: handleKeyDown(handle) }));
     };
     const renderRangeSlider = (rangeSliderValue) => {
         // handle value used to get slider position relative to container from value
@@ -118,29 +80,29 @@ const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassNa
         const handleValueEnd = ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);
         const rangeWidth = handleValueEnd - handleValueStart;
         return (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(styled.SliderRange, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]), left: handleValueStart, width: rangeWidth }),
-            renderSlider(handleValueStart, rangeSliderValue[0], 0),
-            renderSlider(handleValueEnd, rangeSliderValue[1], 1)));
+            React__default.default.createElement(SliderTrack.SliderTrack, { left: handleValueStart, width: rangeWidth, disabled: disabled, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]) }),
+            renderSlider(handleValueStart, rangeSliderValue[0], 'start'),
+            renderSlider(handleValueEnd, rangeSliderValue[1], 'end')));
     };
     const renderSingleSlider = (sliderValue) => {
-        if (Array.isArray(value))
-            return renderRangeSlider(value);
         let handleValue;
-        if (value > max)
+        if (sliderValue > max)
             handleValue = 100;
-        else if (value < min)
+        else if (sliderValue < min)
             handleValue = 0;
         else
             handleValue = ((sliderValue - min) * 100) / (max - min);
-        return renderSlider(handleValue, sliderValue);
+        return (React__default.default.createElement(React__default.default.Fragment, null,
+            showFill && (React__default.default.createElement(SliderTrack.SliderTrack, { left: 0, width: handleValue, disabled: disabled, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]) })),
+            renderSlider(handleValue, sliderValue, 'end')));
     };
-    let render;
-    if (Array.isArray(value))
-        render = renderRangeSlider(value);
-    else
-        render = renderSingleSlider(value);
-    return (React__default.default.createElement(styled.SliderContainer, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), id: id, ref: containerRef },
-        React__default.default.createElement(styled.SliderTrack, null),
+    const render = Array.isArray(value) ? renderRangeSlider(value) : renderSingleSlider(value);
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            Slider_module.container,
+            classNames === null || classNames === undefined ? undefined : classNames.container,
+            e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container,
+        ]), id: id, ref: containerRef },
+        React__default.default.createElement("div", { className: Slider_module.track }),
         render));
 };
 

package/dist/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled';\nimport { SliderComponentPropTypes, DraggingSliderIndex, ClassNamesReturnPayload } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-slider-container` : undefined,\n  sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n  slider: prefix ? `${prefix}-slider` : undefined,\n  startSlider: prefix ? `${prefix}-start-slider` : undefined,\n  endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\nexport const Slider = ({\n  id,\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n  className,\n  e2eClassName,\n  onSlideStart = () => {},\n  onSlideEnd = () => {},\n}: SliderComponentPropTypes) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [draggingSliderIndex, setDraggingSliderIndex] = useState<DraggingSliderIndex>(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const startSliderRef = useRef<HTMLDivElement>(null);\n  const endSliderRef = useRef<HTMLDivElement>(null);\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const sliderValue: number =\n        draggingSliderIndex > -1 ? (value as number[])[draggingSliderIndex] : (value as number);\n      const containerSize = containerRef.current.getBoundingClientRect();\n      // slider position relative to the container in percents\n      const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;\n      // current value by slider position\n      let newValue = (max - min) * (handleValue / 100) + min;\n\n      const diff = sliderValue - newValue;\n\n      // use to apply step to new value\n      if (diff > 0) {\n        newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;\n      }\n      if (diff < 0) {\n        newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;\n      }\n\n      if (sliderValue === newValue) return;\n      if (newValue > max) newValue = max;\n      if (newValue < min) newValue = min;\n\n      if (Array.isArray(value)) {\n        if (draggingSliderIndex === 0 && newValue > value[1]) [, newValue] = value;\n        if (draggingSliderIndex === 1 && newValue < value[0]) [newValue] = value;\n      }\n\n      // used to fix 0.30000000000000004 problem\n      const decimalPlaces = step.toString().includes('.')\n        ? step.toString().split('.').pop()?.length\n        : 0;\n      newValue = Number(newValue.toFixed(decimalPlaces));\n\n      let resultValue;\n      if (Array.isArray(value)) {\n        resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];\n      } else {\n        resultValue = newValue;\n      }\n\n      onChange(resultValue);\n\n      if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {\n        if (draggingSliderIndex === 0) setDraggingSliderIndex(1);\n        if (draggingSliderIndex === 1) setDraggingSliderIndex(0);\n      }\n    },\n    [draggingSliderIndex, isDragging, max, min, onChange, step, value],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    setIsDragging(false);\n    onSlideEnd();\n  }, [onSlideEnd]);\n  const handleMouseDown = useCallback(\n    (e: Event, index: DraggingSliderIndex) => {\n      setIsDragging(true);\n      onSlideStart();\n      if (typeof index === 'number') setDraggingSliderIndex(index);\n      e.preventDefault();\n    },\n    [onSlideStart],\n  );\n\n  useEffect(() => {\n    const handleStartSliderMouseDown = (e: Event) =>\n      handleMouseDown(e, Array.isArray(value) ? 0 : 1);\n    const handleEndSliderMouseDown = (e: Event) => handleMouseDown(e, 1);\n\n    const startSliderEl = startSliderRef.current;\n    const endSliderEl = endSliderRef.current;\n\n    startSliderEl?.addEventListener('mousedown', handleStartSliderMouseDown);\n    endSliderEl?.addEventListener('mousedown', handleEndSliderMouseDown);\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      startSliderEl?.removeEventListener('mousedown', handleStartSliderMouseDown);\n      endSliderEl?.removeEventListener('mousedown', handleEndSliderMouseDown);\n\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);\n\n  const renderSlider = (left: number, valueNow: number, index?: 0 | 1) => {\n    let sliderClassName;\n\n    if (typeof index === 'number') {\n      sliderClassName = buildClassnames(\n        index === 0\n          ? [classNames?.startSlider, e2eClassNames?.startSlider]\n          : [classNames?.endSlider, e2eClassNames?.endSlider],\n      );\n    } else {\n      sliderClassName = buildClassnames([classNames?.slider, e2eClassNames?.slider]);\n    }\n\n    return (\n      <SliderDiv\n        role=\"slider\"\n        ref={index === 1 ? endSliderRef : startSliderRef}\n        className={sliderClassName}\n        left={left}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={valueNow}\n      />\n    );\n  };\n\n  const renderRangeSlider = (rangeSliderValue: number[]) => {\n    // handle value used to get slider position relative to container from value\n    const handleValueStart =\n      ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n    const handleValueEnd =\n      ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n    const rangeWidth = handleValueEnd - handleValueStart;\n\n    return (\n      <>\n        <SliderRange\n          className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n          left={handleValueStart}\n          width={rangeWidth}\n        />\n        {renderSlider(handleValueStart, rangeSliderValue[0], 0)}\n        {renderSlider(handleValueEnd, rangeSliderValue[1], 1)}\n      </>\n    );\n  };\n\n  const renderSingleSlider = (sliderValue: number) => {\n    if (Array.isArray(value)) return renderRangeSlider(value as number[]);\n\n    let handleValue: number;\n\n    if (value > max) handleValue = 100;\n    else if (value < min) handleValue = 0;\n    else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n    return renderSlider(handleValue, sliderValue);\n  };\n\n  let render;\n  if (Array.isArray(value)) render = renderRangeSlider(value);\n  else render = renderSingleSlider(value);\n\n  return (\n    <SliderContainer\n      className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n      id={id}\n      ref={containerRef}\n    >\n      <SliderTrack />\n      {render}\n    </SliderContainer>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","buildClassnames","React","SliderDiv","SliderRange","SliderContainer","SliderTrack"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { SliderComponentProps, ClassNamesReturnPayload, DraggingHandle } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { SliderHandle } from './components/SliderHandle';\nimport { SliderTrack } from './components/SliderTrack';\nimport { useSliderDrag, useSliderKeyboard } from './hooks';\nimport styles from './Slider.module.scss';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-slider-container` : undefined,\n  sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n  slider: prefix ? `${prefix}-slider` : undefined,\n  startSlider: prefix ? `${prefix}-start-slider` : undefined,\n  endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\n/**\n * Slider component for selecting a single value or a range of values.\n * Supports value labels on hover/drag, disabled state, and optional fill visualization.\n */\nexport const Slider = ({\n  id,\n\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n\n  className,\n  e2eClassName,\n\n  showFill = false,\n  showValueLabel = false,\n  disabled = false,\n  ariaLabel = 'Slider',\n  ariaLabelledBy,\n\n  onSlideStart = () => {},\n  onSlideEnd = () => {},\n}: SliderComponentProps) => {\n  // Track which handle is being hovered/focused for value label display\n  const [hoveredHandle, setHoveredHandle] = useState<DraggingHandle>(null);\n  const [focusedHandle, setFocusedHandle] = useState<DraggingHandle>(null);\n\n  // DOM reference for drag calculations\n  const containerRef = useRef<HTMLDivElement>(null);\n  // DOM references for focus during keyboard navigation\n  const startHandleRef = useRef<HTMLDivElement>(null);\n  const endHandleRef = useRef<HTMLDivElement>(null);\n\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const { isDraggingHandle, handleMouseDown } = useSliderDrag({\n    containerRef,\n    value,\n    min,\n    max,\n    step,\n    disabled,\n    onChange,\n    onSlideStart,\n    onSlideEnd,\n  });\n\n  const { handleKeyDown } = useSliderKeyboard({\n    value,\n    min,\n    max,\n    step,\n    disabled,\n    onChange,\n    setFocusedHandle,\n    startHandleRef,\n    endHandleRef,\n  });\n\n  const renderSlider = (horizontalPosition: number, valueNow: number, handle: 'start' | 'end') => {\n    const isActive = isDraggingHandle === handle;\n\n    const sliderClassName =\n      handle === 'start'\n        ? buildClassnames([classNames?.startSlider, e2eClassNames?.startSlider])\n        : buildClassnames([classNames?.endSlider, e2eClassNames?.endSlider]);\n\n    const isHovered = hoveredHandle === handle;\n    const isFocused = focusedHandle === handle;\n    const showLabel = showValueLabel && !disabled && (isActive || isHovered || isFocused);\n\n    return (\n      <SliderHandle\n        ref={handle === 'start' ? startHandleRef : endHandleRef}\n        horizontalPosition={horizontalPosition}\n        value={valueNow}\n        min={min}\n        max={max}\n        disabled={disabled}\n        isActive={isActive}\n        showLabel={showLabel}\n        className={sliderClassName}\n        ariaLabel={ariaLabel}\n        ariaLabelledBy={ariaLabelledBy}\n        onMouseDown={handleMouseDown(handle)}\n        onMouseEnter={() => {\n          if (disabled) return;\n          setHoveredHandle(handle);\n        }}\n        onMouseLeave={() => setHoveredHandle(null)}\n        onFocus={() => {\n          if (disabled) return;\n          setFocusedHandle(handle);\n        }}\n        onBlur={() => setFocusedHandle(null)}\n        onKeyDown={handleKeyDown(handle)}\n      />\n    );\n  };\n\n  const renderRangeSlider = (rangeSliderValue: number[]) => {\n    // handle value used to get slider position relative to container from value\n    const handleValueStart =\n      ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n    const handleValueEnd =\n      ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n    const rangeWidth = handleValueEnd - handleValueStart;\n\n    return (\n      <>\n        <SliderTrack\n          left={handleValueStart}\n          width={rangeWidth}\n          disabled={disabled}\n          className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n        />\n        {renderSlider(handleValueStart, rangeSliderValue[0], 'start')}\n        {renderSlider(handleValueEnd, rangeSliderValue[1], 'end')}\n      </>\n    );\n  };\n\n  const renderSingleSlider = (sliderValue: number) => {\n    let handleValue: number;\n\n    if (sliderValue > max) handleValue = 100;\n    else if (sliderValue < min) handleValue = 0;\n    else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n    return (\n      <>\n        {showFill && (\n          <SliderTrack\n            left={0}\n            width={handleValue}\n            disabled={disabled}\n            className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n          />\n        )}\n        {renderSlider(handleValue, sliderValue, 'end')}\n      </>\n    );\n  };\n\n  const render = Array.isArray(value) ? renderRangeSlider(value) : renderSingleSlider(value);\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n      ])}\n      id={id}\n      ref={containerRef}\n    >\n      <div className={styles.track} />\n      {render}\n    </div>\n  );\n};\n"],"names":["useState","useRef","useSliderDrag","useSliderKeyboard","buildClassnames","React","SliderHandle","SliderTrack","styles"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,kBAAkB,GAAG,CAAC,MAA0B,MAA+B;IACnF,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;IAC5D,WAAW,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAe,aAAA,CAAA,GAAG,SAAS;IAC1D,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAS,OAAA,CAAA,GAAG,SAAS;IAC/C,WAAW,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAe,aAAA,CAAA,GAAG,SAAS;IAC1D,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;AACvD,CAAA,CAAC;AAEF;;;AAGG;AACU,MAAA,MAAM,GAAG,CAAC,EACrB,EAAE,EAEF,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,QAAQ,EAER,SAAS,EACT,YAAY,EAEZ,QAAQ,GAAG,KAAK,EAChB,cAAc,GAAG,KAAK,EACtB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,QAAQ,EACpB,cAAc,EAEd,YAAY,GAAG,MAAK,GAAG,EACvB,UAAU,GAAG,MAAO,GAAC,GACA,KAAI;;IAEzB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAiB,IAAI,CAAC;IACxE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAiB,IAAI,CAAC;;AAGxE,IAAA,MAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;;AAEjD,IAAA,MAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,MAAM,YAAY,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAGC,2BAAa,CAAC;QAC1D,YAAY;QACZ,KAAK;QACL,GAAG;QACH,GAAG;QACH,IAAI;QACJ,QAAQ;QACR,QAAQ;QACR,YAAY;QACZ,UAAU;AACX,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,mCAAiB,CAAC;QAC1C,KAAK;QACL,GAAG;QACH,GAAG;QACH,IAAI;QACJ,QAAQ;QACR,QAAQ;QACR,gBAAgB;QAChB,cAAc;QACd,YAAY;AACb,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,kBAA0B,EAAE,QAAgB,EAAE,MAAuB,KAAI;AAC7F,QAAA,MAAM,QAAQ,GAAG,gBAAgB,KAAK,MAAM;AAE5C,QAAA,MAAM,eAAe,GACnB,MAAM,KAAK;cACPC,+BAAe,CAAC,CAAC,UAAU,KAAV,IAAA,IAAA,UAAU,6BAAV,UAAU,CAAE,WAAW,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,WAAW,CAAC;cACrEA,+BAAe,CAAC,CAAC,UAAU,KAAV,IAAA,IAAA,UAAU,6BAAV,UAAU,CAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC;AAExE,QAAA,MAAM,SAAS,GAAG,aAAa,KAAK,MAAM;AAC1C,QAAA,MAAM,SAAS,GAAG,aAAa,KAAK,MAAM;AAC1C,QAAA,MAAM,SAAS,GAAG,cAAc,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,SAAS,IAAI,SAAS,CAAC;AAErF,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,EACX,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,cAAc,GAAG,YAAY,EACvD,kBAAkB,EAAE,kBAAkB,EACtC,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,EACpC,YAAY,EAAE,MAAK;AACjB,gBAAA,IAAI,QAAQ;oBAAE;gBACd,gBAAgB,CAAC,MAAM,CAAC;AAC1B,aAAC,EACD,YAAY,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,QAAQ;oBAAE;gBACd,gBAAgB,CAAC,MAAM,CAAC;AAC1B,aAAC,EACD,MAAM,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,EAAA,CAChC;AAEN,KAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,gBAA0B,KAAI;;AAEvD,QAAA,MAAM,gBAAgB,GACpB,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;AACnF,QAAA,MAAM,cAAc,GAClB,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;AAErF,QAAA,MAAM,UAAU,GAAG,cAAc,GAAG,gBAAgB;AAEpD,QAAA,QACED,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,sBAAA,CAAA,aAAA,CAACE,uBAAW,EACV,EAAA,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEH,+BAAe,CAAC,CAAC,UAAU,aAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,WAAW,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,WAAW,CAAC,CAAC,EACjF,CAAA;YACD,YAAY,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;AAC5D,YAAA,YAAY,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CACxD;AAEP,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,WAAmB,KAAI;AACjD,QAAA,IAAI,WAAmB;QAEvB,IAAI,WAAW,GAAG,GAAG;YAAE,WAAW,GAAG,GAAG;aACnC,IAAI,WAAW,GAAG,GAAG;YAAE,WAAW,GAAG,CAAC;;AACtC,YAAA,WAAW,GAAG,CAAC,CAAC,WAAW,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;AAE5D,QAAA,QACEC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,YAAA,QAAQ,KACPA,sBAAA,CAAA,aAAA,CAACE,uBAAW,EACV,EAAA,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAEH,+BAAe,CAAC,CAAC,UAAU,KAAV,IAAA,IAAA,UAAU,6BAAV,UAAU,CAAE,WAAW,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,WAAW,CAAC,CAAC,GACjF,CACH;YACA,YAAY,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,CAAC,CAC7C;AAEP,KAAC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAE1F,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAED,+BAAe,CAAC;AACzB,YAAAI,aAAM,CAAC,SAAS;AAChB,YAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,SAAA,GAAA,SAAA,GAAA,UAAU,CAAE,SAAS;AACrB,YAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS;AACzB,SAAA,CAAC,EACF,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,YAAY,EAAA;AAEjB,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,aAAM,CAAC,KAAK,EAAI,CAAA;QAC/B,MAAM,CACH;AAEV;;;;"}

package/dist/components/Slider/Slider.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-import { SliderComponentPropTypes } from './types';
-export declare const Slider: ({ id, value, min, max, step, onChange, className, e2eClassName, onSlideStart, onSlideEnd, }: SliderComponentPropTypes) => React.JSX.Element;
+import { SliderComponentProps } from './types';
+/**
+ * Slider component for selecting a single value or a range of values.
+ * Supports value labels on hover/drag, disabled state, and optional fill visualization.
+ */
+export declare const Slider: ({ id, value, min, max, step, onChange, className, e2eClassName, showFill, showValueLabel, disabled, ariaLabel, ariaLabelledBy, onSlideStart, onSlideEnd, }: SliderComponentProps) => React.JSX.Element;

package/dist/components/Slider/Slider.js

@@ -1,6 +1,10 @@
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled.js';
+import React__default, { useState, useRef } from 'react';
 import { buildClassnames } from '../../utils/buildClassnames.js';
+import { SliderHandle } from './components/SliderHandle/SliderHandle.js';
+import { SliderTrack } from './components/SliderTrack/SliderTrack.js';
+import { useSliderDrag } from './hooks/useSliderDrag.js';
+import { useSliderKeyboard } from './hooks/useSliderKeyboard.js';
+import styles from './Slider.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     container: prefix ? `${prefix}-slider-container` : undefined,
@@ -9,102 +13,60 @@ const generateClassNames = (prefix) => ({
     startSlider: prefix ? `${prefix}-start-slider` : undefined,
     endSlider: prefix ? `${prefix}-end-slider` : undefined,
 });
-const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassName, onSlideStart = () => { }, onSlideEnd = () => { }, }) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const [draggingSliderIndex, setDraggingSliderIndex] = useState(-1);
+/**
+ * Slider component for selecting a single value or a range of values.
+ * Supports value labels on hover/drag, disabled state, and optional fill visualization.
+ */
+const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassName, showFill = false, showValueLabel = false, disabled = false, ariaLabel = 'Slider', ariaLabelledBy, onSlideStart = () => { }, onSlideEnd = () => { }, }) => {
+    // Track which handle is being hovered/focused for value label display
+    const [hoveredHandle, setHoveredHandle] = useState(null);
+    const [focusedHandle, setFocusedHandle] = useState(null);
+    // DOM reference for drag calculations
     const containerRef = useRef(null);
-    const startSliderRef = useRef(null);
-    const endSliderRef = useRef(null);
+    // DOM references for focus during keyboard navigation
+    const startHandleRef = useRef(null);
+    const endHandleRef = useRef(null);
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const handleMouseMove = useCallback((e) => {
-        var _a;
-        if (!isDragging || !containerRef.current)
-            return;
-        const sliderValue = draggingSliderIndex > -1 ? value[draggingSliderIndex] : value;
-        const containerSize = containerRef.current.getBoundingClientRect();
-        // slider position relative to the container in percents
-        const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;
-        // current value by slider position
-        let newValue = (max - min) * (handleValue / 100) + min;
-        const diff = sliderValue - newValue;
-        // use to apply step to new value
-        if (diff > 0) {
-            newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;
-        }
-        if (diff < 0) {
-            newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;
-        }
-        if (sliderValue === newValue)
-            return;
-        if (newValue > max)
-            newValue = max;
-        if (newValue < min)
-            newValue = min;
-        if (Array.isArray(value)) {
-            if (draggingSliderIndex === 0 && newValue > value[1])
-                [, newValue] = value;
-            if (draggingSliderIndex === 1 && newValue < value[0])
-                [newValue] = value;
-        }
-        // used to fix 0.30000000000000004 problem
-        const decimalPlaces = step.toString().includes('.')
-            ? (_a = step.toString().split('.').pop()) === null || _a === undefined ? undefined : _a.length
-            : 0;
-        newValue = Number(newValue.toFixed(decimalPlaces));
-        let resultValue;
-        if (Array.isArray(value)) {
-            resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];
-        }
-        else {
-            resultValue = newValue;
-        }
-        onChange(resultValue);
-        if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {
-            if (draggingSliderIndex === 0)
-                setDraggingSliderIndex(1);
-            if (draggingSliderIndex === 1)
-                setDraggingSliderIndex(0);
-        }
-    }, [draggingSliderIndex, isDragging, max, min, onChange, step, value]);
-    const handleMouseUp = useCallback(() => {
-        setIsDragging(false);
-        onSlideEnd();
-    }, [onSlideEnd]);
-    const handleMouseDown = useCallback((e, index) => {
-        setIsDragging(true);
-        onSlideStart();
-        if (typeof index === 'number')
-            setDraggingSliderIndex(index);
-        e.preventDefault();
-    }, [onSlideStart]);
-    useEffect(() => {
-        const handleStartSliderMouseDown = (e) => handleMouseDown(e, Array.isArray(value) ? 0 : 1);
-        const handleEndSliderMouseDown = (e) => handleMouseDown(e, 1);
-        const startSliderEl = startSliderRef.current;
-        const endSliderEl = endSliderRef.current;
-        startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.addEventListener('mousedown', handleStartSliderMouseDown);
-        endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.addEventListener('mousedown', handleEndSliderMouseDown);
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.removeEventListener('mousedown', handleStartSliderMouseDown);
-            endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.removeEventListener('mousedown', handleEndSliderMouseDown);
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);
-    const renderSlider = (left, valueNow, index) => {
-        let sliderClassName;
-        if (typeof index === 'number') {
-            sliderClassName = buildClassnames(index === 0
-                ? [classNames === null || classNames === undefined ? undefined : classNames.startSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.startSlider]
-                : [classNames === null || classNames === undefined ? undefined : classNames.endSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.endSlider]);
-        }
-        else {
-            sliderClassName = buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.slider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.slider]);
-        }
-        return (React__default.createElement(SliderDiv, { role: "slider", ref: index === 1 ? endSliderRef : startSliderRef, className: sliderClassName, left: left, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": valueNow }));
+    const { isDraggingHandle, handleMouseDown } = useSliderDrag({
+        containerRef,
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange,
+        onSlideStart,
+        onSlideEnd,
+    });
+    const { handleKeyDown } = useSliderKeyboard({
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        onChange,
+        setFocusedHandle,
+        startHandleRef,
+        endHandleRef,
+    });
+    const renderSlider = (horizontalPosition, valueNow, handle) => {
+        const isActive = isDraggingHandle === handle;
+        const sliderClassName = handle === 'start'
+            ? buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.startSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.startSlider])
+            : buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.endSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.endSlider]);
+        const isHovered = hoveredHandle === handle;
+        const isFocused = focusedHandle === handle;
+        const showLabel = showValueLabel && !disabled && (isActive || isHovered || isFocused);
+        return (React__default.createElement(SliderHandle, { ref: handle === 'start' ? startHandleRef : endHandleRef, horizontalPosition: horizontalPosition, value: valueNow, min: min, max: max, disabled: disabled, isActive: isActive, showLabel: showLabel, className: sliderClassName, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, onMouseDown: handleMouseDown(handle), onMouseEnter: () => {
+                if (disabled)
+                    return;
+                setHoveredHandle(handle);
+            }, onMouseLeave: () => setHoveredHandle(null), onFocus: () => {
+                if (disabled)
+                    return;
+                setFocusedHandle(handle);
+            }, onBlur: () => setFocusedHandle(null), onKeyDown: handleKeyDown(handle) }));
     };
     const renderRangeSlider = (rangeSliderValue) => {
         // handle value used to get slider position relative to container from value
@@ -112,29 +74,29 @@ const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassNa
         const handleValueEnd = ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);
         const rangeWidth = handleValueEnd - handleValueStart;
         return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(SliderRange, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]), left: handleValueStart, width: rangeWidth }),
-            renderSlider(handleValueStart, rangeSliderValue[0], 0),
-            renderSlider(handleValueEnd, rangeSliderValue[1], 1)));
+            React__default.createElement(SliderTrack, { left: handleValueStart, width: rangeWidth, disabled: disabled, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]) }),
+            renderSlider(handleValueStart, rangeSliderValue[0], 'start'),
+            renderSlider(handleValueEnd, rangeSliderValue[1], 'end')));
     };
     const renderSingleSlider = (sliderValue) => {
-        if (Array.isArray(value))
-            return renderRangeSlider(value);
         let handleValue;
-        if (value > max)
+        if (sliderValue > max)
             handleValue = 100;
-        else if (value < min)
+        else if (sliderValue < min)
             handleValue = 0;
         else
             handleValue = ((sliderValue - min) * 100) / (max - min);
-        return renderSlider(handleValue, sliderValue);
+        return (React__default.createElement(React__default.Fragment, null,
+            showFill && (React__default.createElement(SliderTrack, { left: 0, width: handleValue, disabled: disabled, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]) })),
+            renderSlider(handleValue, sliderValue, 'end')));
     };
-    let render;
-    if (Array.isArray(value))
-        render = renderRangeSlider(value);
-    else
-        render = renderSingleSlider(value);
-    return (React__default.createElement(SliderContainer, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), id: id, ref: containerRef },
-        React__default.createElement(SliderTrack, null),
+    const render = Array.isArray(value) ? renderRangeSlider(value) : renderSingleSlider(value);
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.container,
+            classNames === null || classNames === undefined ? undefined : classNames.container,
+            e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container,
+        ]), id: id, ref: containerRef },
+        React__default.createElement("div", { className: styles.track }),
         render));
 };
 

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled';\nimport { SliderComponentPropTypes, DraggingSliderIndex, ClassNamesReturnPayload } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-slider-container` : undefined,\n  sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n  slider: prefix ? `${prefix}-slider` : undefined,\n  startSlider: prefix ? `${prefix}-start-slider` : undefined,\n  endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\nexport const Slider = ({\n  id,\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n  className,\n  e2eClassName,\n  onSlideStart = () => {},\n  onSlideEnd = () => {},\n}: SliderComponentPropTypes) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [draggingSliderIndex, setDraggingSliderIndex] = useState<DraggingSliderIndex>(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const startSliderRef = useRef<HTMLDivElement>(null);\n  const endSliderRef = useRef<HTMLDivElement>(null);\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging || !containerRef.current) return;\n      const sliderValue: number =\n        draggingSliderIndex > -1 ? (value as number[])[draggingSliderIndex] : (value as number);\n      const containerSize = containerRef.current.getBoundingClientRect();\n      // slider position relative to the container in percents\n      const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;\n      // current value by slider position\n      let newValue = (max - min) * (handleValue / 100) + min;\n\n      const diff = sliderValue - newValue;\n\n      // use to apply step to new value\n      if (diff > 0) {\n        newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;\n      }\n      if (diff < 0) {\n        newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;\n      }\n\n      if (sliderValue === newValue) return;\n      if (newValue > max) newValue = max;\n      if (newValue < min) newValue = min;\n\n      if (Array.isArray(value)) {\n        if (draggingSliderIndex === 0 && newValue > value[1]) [, newValue] = value;\n        if (draggingSliderIndex === 1 && newValue < value[0]) [newValue] = value;\n      }\n\n      // used to fix 0.30000000000000004 problem\n      const decimalPlaces = step.toString().includes('.')\n        ? step.toString().split('.').pop()?.length\n        : 0;\n      newValue = Number(newValue.toFixed(decimalPlaces));\n\n      let resultValue;\n      if (Array.isArray(value)) {\n        resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];\n      } else {\n        resultValue = newValue;\n      }\n\n      onChange(resultValue);\n\n      if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {\n        if (draggingSliderIndex === 0) setDraggingSliderIndex(1);\n        if (draggingSliderIndex === 1) setDraggingSliderIndex(0);\n      }\n    },\n    [draggingSliderIndex, isDragging, max, min, onChange, step, value],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    setIsDragging(false);\n    onSlideEnd();\n  }, [onSlideEnd]);\n  const handleMouseDown = useCallback(\n    (e: Event, index: DraggingSliderIndex) => {\n      setIsDragging(true);\n      onSlideStart();\n      if (typeof index === 'number') setDraggingSliderIndex(index);\n      e.preventDefault();\n    },\n    [onSlideStart],\n  );\n\n  useEffect(() => {\n    const handleStartSliderMouseDown = (e: Event) =>\n      handleMouseDown(e, Array.isArray(value) ? 0 : 1);\n    const handleEndSliderMouseDown = (e: Event) => handleMouseDown(e, 1);\n\n    const startSliderEl = startSliderRef.current;\n    const endSliderEl = endSliderRef.current;\n\n    startSliderEl?.addEventListener('mousedown', handleStartSliderMouseDown);\n    endSliderEl?.addEventListener('mousedown', handleEndSliderMouseDown);\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      startSliderEl?.removeEventListener('mousedown', handleStartSliderMouseDown);\n      endSliderEl?.removeEventListener('mousedown', handleEndSliderMouseDown);\n\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);\n\n  const renderSlider = (left: number, valueNow: number, index?: 0 | 1) => {\n    let sliderClassName;\n\n    if (typeof index === 'number') {\n      sliderClassName = buildClassnames(\n        index === 0\n          ? [classNames?.startSlider, e2eClassNames?.startSlider]\n          : [classNames?.endSlider, e2eClassNames?.endSlider],\n      );\n    } else {\n      sliderClassName = buildClassnames([classNames?.slider, e2eClassNames?.slider]);\n    }\n\n    return (\n      <SliderDiv\n        role=\"slider\"\n        ref={index === 1 ? endSliderRef : startSliderRef}\n        className={sliderClassName}\n        left={left}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={valueNow}\n      />\n    );\n  };\n\n  const renderRangeSlider = (rangeSliderValue: number[]) => {\n    // handle value used to get slider position relative to container from value\n    const handleValueStart =\n      ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n    const handleValueEnd =\n      ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n    const rangeWidth = handleValueEnd - handleValueStart;\n\n    return (\n      <>\n        <SliderRange\n          className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n          left={handleValueStart}\n          width={rangeWidth}\n        />\n        {renderSlider(handleValueStart, rangeSliderValue[0], 0)}\n        {renderSlider(handleValueEnd, rangeSliderValue[1], 1)}\n      </>\n    );\n  };\n\n  const renderSingleSlider = (sliderValue: number) => {\n    if (Array.isArray(value)) return renderRangeSlider(value as number[]);\n\n    let handleValue: number;\n\n    if (value > max) handleValue = 100;\n    else if (value < min) handleValue = 0;\n    else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n    return renderSlider(handleValue, sliderValue);\n  };\n\n  let render;\n  if (Array.isArray(value)) render = renderRangeSlider(value);\n  else render = renderSingleSlider(value);\n\n  return (\n    <SliderContainer\n      className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n      id={id}\n      ref={containerRef}\n    >\n      <SliderTrack />\n      {render}\n    </SliderContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { SliderComponentProps, ClassNamesReturnPayload, DraggingHandle } from './types';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { SliderHandle } from './components/SliderHandle';\nimport { SliderTrack } from './components/SliderTrack';\nimport { useSliderDrag, useSliderKeyboard } from './hooks';\nimport styles from './Slider.module.scss';\n\nconst generateClassNames = (prefix: string | undefined): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-slider-container` : undefined,\n  sliderRange: prefix ? `${prefix}-slider-range` : undefined,\n  slider: prefix ? `${prefix}-slider` : undefined,\n  startSlider: prefix ? `${prefix}-start-slider` : undefined,\n  endSlider: prefix ? `${prefix}-end-slider` : undefined,\n});\n\n/**\n * Slider component for selecting a single value or a range of values.\n * Supports value labels on hover/drag, disabled state, and optional fill visualization.\n */\nexport const Slider = ({\n  id,\n\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n\n  className,\n  e2eClassName,\n\n  showFill = false,\n  showValueLabel = false,\n  disabled = false,\n  ariaLabel = 'Slider',\n  ariaLabelledBy,\n\n  onSlideStart = () => {},\n  onSlideEnd = () => {},\n}: SliderComponentProps) => {\n  // Track which handle is being hovered/focused for value label display\n  const [hoveredHandle, setHoveredHandle] = useState<DraggingHandle>(null);\n  const [focusedHandle, setFocusedHandle] = useState<DraggingHandle>(null);\n\n  // DOM reference for drag calculations\n  const containerRef = useRef<HTMLDivElement>(null);\n  // DOM references for focus during keyboard navigation\n  const startHandleRef = useRef<HTMLDivElement>(null);\n  const endHandleRef = useRef<HTMLDivElement>(null);\n\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  const { isDraggingHandle, handleMouseDown } = useSliderDrag({\n    containerRef,\n    value,\n    min,\n    max,\n    step,\n    disabled,\n    onChange,\n    onSlideStart,\n    onSlideEnd,\n  });\n\n  const { handleKeyDown } = useSliderKeyboard({\n    value,\n    min,\n    max,\n    step,\n    disabled,\n    onChange,\n    setFocusedHandle,\n    startHandleRef,\n    endHandleRef,\n  });\n\n  const renderSlider = (horizontalPosition: number, valueNow: number, handle: 'start' | 'end') => {\n    const isActive = isDraggingHandle === handle;\n\n    const sliderClassName =\n      handle === 'start'\n        ? buildClassnames([classNames?.startSlider, e2eClassNames?.startSlider])\n        : buildClassnames([classNames?.endSlider, e2eClassNames?.endSlider]);\n\n    const isHovered = hoveredHandle === handle;\n    const isFocused = focusedHandle === handle;\n    const showLabel = showValueLabel && !disabled && (isActive || isHovered || isFocused);\n\n    return (\n      <SliderHandle\n        ref={handle === 'start' ? startHandleRef : endHandleRef}\n        horizontalPosition={horizontalPosition}\n        value={valueNow}\n        min={min}\n        max={max}\n        disabled={disabled}\n        isActive={isActive}\n        showLabel={showLabel}\n        className={sliderClassName}\n        ariaLabel={ariaLabel}\n        ariaLabelledBy={ariaLabelledBy}\n        onMouseDown={handleMouseDown(handle)}\n        onMouseEnter={() => {\n          if (disabled) return;\n          setHoveredHandle(handle);\n        }}\n        onMouseLeave={() => setHoveredHandle(null)}\n        onFocus={() => {\n          if (disabled) return;\n          setFocusedHandle(handle);\n        }}\n        onBlur={() => setFocusedHandle(null)}\n        onKeyDown={handleKeyDown(handle)}\n      />\n    );\n  };\n\n  const renderRangeSlider = (rangeSliderValue: number[]) => {\n    // handle value used to get slider position relative to container from value\n    const handleValueStart =\n      ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);\n    const handleValueEnd =\n      ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);\n\n    const rangeWidth = handleValueEnd - handleValueStart;\n\n    return (\n      <>\n        <SliderTrack\n          left={handleValueStart}\n          width={rangeWidth}\n          disabled={disabled}\n          className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n        />\n        {renderSlider(handleValueStart, rangeSliderValue[0], 'start')}\n        {renderSlider(handleValueEnd, rangeSliderValue[1], 'end')}\n      </>\n    );\n  };\n\n  const renderSingleSlider = (sliderValue: number) => {\n    let handleValue: number;\n\n    if (sliderValue > max) handleValue = 100;\n    else if (sliderValue < min) handleValue = 0;\n    else handleValue = ((sliderValue - min) * 100) / (max - min);\n\n    return (\n      <>\n        {showFill && (\n          <SliderTrack\n            left={0}\n            width={handleValue}\n            disabled={disabled}\n            className={buildClassnames([classNames?.sliderRange, e2eClassNames?.sliderRange])}\n          />\n        )}\n        {renderSlider(handleValue, sliderValue, 'end')}\n      </>\n    );\n  };\n\n  const render = Array.isArray(value) ? renderRangeSlider(value) : renderSingleSlider(value);\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n      ])}\n      id={id}\n      ref={containerRef}\n    >\n      <div className={styles.track} />\n      {render}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Slider/Slider.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_qqnkn_1 {\n  --track-height: var(--sizes-1);\n  --slider-size: var(--sizes-3);\n  --additional-padding: calc(var(--sizes-1) / 2);\n  --border-size: var(--sizes-1);\n  min-width: var(--sizes-20);\n  display: inline-block;\n  position: relative;\n  padding: calc(var(--slider-size) / 2 + var(--additional-padding)) 0;\n}\n\n._track_qqnkn_12 {\n  background: var(--colors-neutral-grey-base);\n  height: var(--track-height);\n  border-radius: var(--radius-base);\n}");
+var styles = {"container":"_container_qqnkn_1","track":"_track_qqnkn_12"};
+
+module.exports = styles;
+//# sourceMappingURL=Slider.module.scss.cjs.map

package/dist/components/Slider/Slider.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.scss.cjs","sources":["../../../src/components/Slider/Slider.module.scss"],"sourcesContent":[".container {\n  --track-height: var(--sizes-1);\n  --slider-size: var(--sizes-3);\n  --additional-padding: calc(var(--sizes-1) / 2);\n  --border-size: var(--sizes-1);\n\n  min-width: var(--sizes-20);\n  display: inline-block;\n  position: relative;\n  padding: calc(var(--slider-size) / 2 + var(--additional-padding)) 0;\n}\n\n.track {\n  background: var(--colors-neutral-grey-base);\n  height: var(--track-height);\n  border-radius: var(--radius-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2dAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,iBAAA;;;;"}

package/dist/components/Slider/Slider.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_qqnkn_1 {\n  --track-height: var(--sizes-1);\n  --slider-size: var(--sizes-3);\n  --additional-padding: calc(var(--sizes-1) / 2);\n  --border-size: var(--sizes-1);\n  min-width: var(--sizes-20);\n  display: inline-block;\n  position: relative;\n  padding: calc(var(--slider-size) / 2 + var(--additional-padding)) 0;\n}\n\n._track_qqnkn_12 {\n  background: var(--colors-neutral-grey-base);\n  height: var(--track-height);\n  border-radius: var(--radius-base);\n}");
+var styles = {"container":"_container_qqnkn_1","track":"_track_qqnkn_12"};
+
+export { styles as default };
+//# sourceMappingURL=Slider.module.scss.js.map

package/dist/components/Slider/Slider.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.scss.js","sources":["../../../src/components/Slider/Slider.module.scss"],"sourcesContent":[".container {\n  --track-height: var(--sizes-1);\n  --slider-size: var(--sizes-3);\n  --additional-padding: calc(var(--sizes-1) / 2);\n  --border-size: var(--sizes-1);\n\n  min-width: var(--sizes-20);\n  display: inline-block;\n  position: relative;\n  padding: calc(var(--slider-size) / 2 + var(--additional-padding)) 0;\n}\n\n.track {\n  background: var(--colors-neutral-grey-base);\n  height: var(--track-height);\n  border-radius: var(--radius-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2dAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,iBAAA;;;;"}