@salt-ds/core 1.43.0 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @salt-ds/core
 
+## 1.44.0
+
+### Minor Changes
+
+- 7fe2106: Promote updated `Slider` and `RangeSlider` components to core. The update includes:
+
+  - Improved accessibility and focus behavior.
+  - Enhanced API for slider customization, including options like `marks`, `showTicks`, and `showTooltip`.
+  - Fixed touch interactions on mobile to allow dragging of the slider thumb without horizontal screen scrolling.
+  - Set the default `max` value of the `Slider` and `RangeSlider` as 100 to be consistent with the HTML specification.
+
+  ```tsx
+  <Slider
+    min={0}
+    max={30}
+    defaultValue={15}
+    marks={[
+      { value: 0, label: "Minimum" },
+      { value: 30, label: "Maximum" },
+    ]}
+    showTicks={true}
+  />
+  ```
+
+  ```tsx
+  <RangeSlider
+    min={0}
+    max={30}
+    defaultValue={15}
+    marks={[
+      { value: 0, label: "0" },
+      { value: 10, label: "10" },
+      { value: 15, label: "15" },
+      { value: 19, label: "19" },
+      { value: 30, label: "30" },
+    ]}
+    showTicks={true}
+    minLabel="Very low"
+    maxLabel="Very high"
+    restrictToMarks={true}
+  />
+  ```
+
 ## 1.43.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -4557,4 +4557,259 @@ label.saltText small,
   }
 }
 
-/* src/fa7597f6-19b4-4fb6-a9a7-5080ccaa6d59.css */
+/* src/slider/internal/SliderThumb.css */
+.saltSliderThumb {
+  align-items: center;
+  background: var(--salt-accent-borderColor);
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  height: var(--salt-size-selectable);
+  outline: none;
+  position: absolute;
+  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);
+  transform: translateX(-50%);
+  width: var(--salt-size-border-strong);
+  touch-action: none;
+}
+.saltSliderThumb-disabled {
+  background: var(--salt-accent-borderColor-disabled);
+  pointer-events: none;
+}
+.saltSliderThumb-focusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-color: var(--salt-focused-outlineColor);
+}
+.saltSliderThumb:active,
+.saltSliderThumb-dragging {
+  cursor: var(--draggable-grab-cursor-active);
+}
+.saltSliderThumb-input {
+  border: 0;
+  appearance: none;
+  cursor: var(--salt-selectable-cursor-hover);
+  height: var(--salt-size-base);
+  left: var(--slider-progressPercentage);
+  margin: 0;
+  opacity: 0.0001;
+  overflow: hidden;
+  -webkit-appearance: none;
+  pointer-events: none;
+  width: var(--salt-size-base);
+  padding: 0;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.saltSliderThumb-secondThumb {
+  z-index: 2;
+}
+.saltSliderThumb-accessibleText {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* src/slider/internal/SliderTooltip.css */
+.saltSliderTooltip {
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
+  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
+  bottom: 50%;
+  left: 50%;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: var(--saltTooltip-textAlign, left);
+  user-select: none;
+  visibility: hidden;
+  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
+}
+.saltSliderTooltip-visible,
+.saltSliderTooltip:hover {
+  visibility: visible;
+}
+.saltSliderTooltip-arrow {
+  fill: var(--salt-container-primary-background);
+  height: var(--salt-size-icon);
+  left: 50%;
+  position: absolute;
+  pointer-events: none;
+  top: 100%;
+  transform: translateX(-50%);
+  stroke: var(--salt-container-primary-borderColor);
+  stroke-width: var(--salt-size-border);
+  width: var(--salt-size-icon);
+}
+.saltSliderTooltip-text {
+  white-space: nowrap;
+}
+
+/* src/slider/internal/SliderTrack.css */
+.saltSliderTrack {
+  --slider-track-background: var(--salt-track-borderColor);
+  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-progressPercentage: 0%;
+  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
+  --slider-progressPercentageStart: 0%;
+  --slider-progressPercentageEnd: 0%;
+  display: flex;
+  touch-action: none;
+  width: 100%;
+}
+.saltSliderTrack.saltSliderTrack-withMarks {
+  margin-bottom: calc(var(--salt-size-base) / 2);
+}
+.saltSliderTrack-disabled {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltSliderTrack-wrapper {
+  align-items: center;
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  flex: 1;
+  height: var(--salt-size-selectable);
+  position: relative;
+  width: 100%;
+}
+.saltSliderTrack-disabled,
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  pointer-events: none;
+}
+.saltSliderTrack-rail {
+  display: flex;
+  flex: 100%;
+  height: var(--salt-size-bar);
+  justify-content: space-between;
+  position: relative;
+}
+.saltSliderTrack-rail::before,
+.saltSliderTrack-rail::after {
+  content: "";
+  display: block;
+  height: 100%;
+}
+.saltSliderTrack-rail::before {
+  background: var(--slider-track-fill);
+  border-top-left-radius: var(--salt-palette-corner-weaker);
+  border-bottom-left-radius: var(--salt-palette-corner-weaker);
+  width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
+  border-bottom-left-radius: unset;
+}
+.saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  border-top-right-radius: var(--salt-palette-corner-weaker);
+  border-bottom-right-radius: var(--salt-palette-corner-weaker);
+  width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
+  border-bottom-right-radius: unset;
+}
+.saltSliderTrack-range .saltSliderTrack-rail::before {
+  background: var(--slider-track-background);
+  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
+  background: var(--slider-track-fill);
+  height: 100%;
+  left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));
+  position: absolute;
+  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);
+}
+.saltSliderTrack-minLabel,
+.saltSliderTrack-maxLabel {
+  user-select: none;
+}
+.saltSliderTrack-dragging,
+.saltSliderTrack-dragging .saltSliderTrack-wrapper {
+  cursor: var(--salt-draggable-grab-cursor-active);
+}
+.saltSliderTrack-disabled {
+  --slider-track-fill: var(--salt-accent-borderColor-disabled);
+  --slider-track-background: var(--salt-track-borderColor-disabled);
+}
+.saltSliderTrack-ticks {
+  top: calc(var(--salt-size-bar) + var(--slider-tick-height));
+  position: absolute;
+  width: 100%;
+}
+.saltSliderTrack-tick {
+  background: var(--slider-track-background);
+  height: var(--slider-tick-height);
+  position: absolute;
+  transform: translate(-50%);
+  width: var(--salt-size-border-strong);
+}
+.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
+  visibility: hidden;
+}
+.saltSliderTrack-tickSelected {
+  background: var(--slider-track-fill);
+}
+.saltSliderTrack-tick:first-of-type {
+  transform: unset;
+}
+.saltSliderTrack-tick:last-of-type {
+  transform: translateX(-100%);
+}
+.saltSliderTrack-marks {
+  position: absolute;
+  user-select: none;
+  width: 100%;
+}
+.saltSliderTrack-markLabel {
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-label-fontFamily);
+  font-weight: var(--salt-text-label-fontWeight);
+  font-size: var(--salt-text-label-fontSize);
+  line-height: var(--salt-text-label-lineHeight);
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  transform: translateX(-50%);
+  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));
+  white-space: nowrap;
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {
+  transform: translateX(0%);
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {
+  transform: translateX(-100%);
+}
+.saltFormField .saltSliderTrack.saltSliderTrack-withMark {
+  margin-bottom: 0;
+}
+.saltFormField .saltSliderTrack-container {
+  --saltFormField-label-width: 10%;
+  height: var(--salt-size-base);
+}
+.saltFormField .saltSliderTrack-markLabel {
+  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);
+}
+
+/* src/1af42f57-5eb2-47da-8657-1a22a667b415.css */

package/dist-cjs/index.js

@@ -109,6 +109,8 @@ var Corner = require('./theme/Corner.js');
 var Toast = require('./toast/Toast.js');
 var ToastContent = require('./toast/ToastContent.js');
 var SaltProvider = require('./salt-provider/SaltProvider.js');
+var Slider = require('./slider/Slider.js');
+var RangeSlider = require('./slider/RangeSlider.js');
 var SplitLayout = require('./split-layout/SplitLayout.js');
 var Switch = require('./switch/Switch.js');
 var Tag = require('./tag/Tag.js');
@@ -286,6 +288,8 @@ exports.UNSTABLE_SaltProviderNext = SaltProvider.UNSTABLE_SaltProviderNext;
 exports.useBreakpoints = SaltProvider.useBreakpoints;
 exports.useDensity = SaltProvider.useDensity;
 exports.useTheme = SaltProvider.useTheme;
+exports.Slider = Slider.Slider;
+exports.RangeSlider = RangeSlider.RangeSlider;
 exports.SplitLayout = SplitLayout.SplitLayout;
 exports.Switch = Switch.Switch;
 exports.Tag = Tag.Tag;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/slider/RangeSlider.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+require('../form-field-context/FormFieldContext.js');
+var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SliderThumb = require('./internal/SliderThumb.js');
+var SliderTrack = require('./internal/SliderTrack.js');
+var useRangeSliderThumb = require('./internal/useRangeSliderThumb.js');
+var utils = require('./internal/utils.js');
+
+const RangeSlider = React.forwardRef(
+  function RangeSlider2({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-valuetext": ariaValueText,
+    accessibleMaxText,
+    accessibleMinText,
+    decimalPlaces = 2,
+    disabled: disabledProp = false,
+    format,
+    marks,
+    max = 100,
+    min = 0,
+    maxLabel,
+    minLabel,
+    onChange,
+    onChangeEnd,
+    restrictToMarks = false,
+    showTooltip = true,
+    step = 1,
+    stepMultiplier = 2,
+    value: valueProp,
+    defaultValue = [min, min + (max - min) / 2],
+    ...rest
+  }, ref) {
+    const [valueState, setValue] = useControlled.useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "RangeSlider",
+      state: "value"
+    });
+    const lastValueRef = React.useRef(valueState);
+    const {
+      a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+      disabled: formFieldDisabled
+    } = useFormFieldProps.useFormFieldProps();
+    const disabled = formFieldDisabled || disabledProp;
+    const inputRefs = Array.from(
+      { length: 2 },
+      () => React.useRef(null)
+    );
+    const value = utils.clampRange(
+      valueState,
+      max,
+      min,
+      step,
+      decimalPlaces,
+      marks,
+      restrictToMarks
+    );
+    const progressPercentageStart = utils.calculatePercentage(value[0], max, min);
+    const progressPercentageEnd = utils.calculatePercentage(value[1], max, min);
+    const handleInputChange = (event, thumbIndex) => {
+      const parsedValue = utils.toFloat(event.target.value);
+      const values = preventThumbOverlap(parsedValue, value, thumbIndex);
+      const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
+      if (haveValuesChanged) {
+        const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
+        setValue(values2);
+        onChange == null ? void 0 : onChange(event.nativeEvent, values2);
+        onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, values2);
+        lastValueRef.current = values2;
+      }
+    };
+    const {
+      handleBlur,
+      handleFocus,
+      handleKeydownOnThumb,
+      handlePointerDownOnThumb,
+      handlePointerDownOnTrack,
+      isDragging,
+      isFocusVisible,
+      sliderRef,
+      thumbIndexState,
+      preventThumbOverlap
+    } = useRangeSliderThumb.useRangeSliderThumb({
+      decimalPlaces,
+      handleInputChange,
+      inputRefs,
+      marks,
+      min,
+      max,
+      step,
+      value,
+      onChange,
+      onChangeEnd,
+      restrictToMarks,
+      setValue,
+      stepMultiplier
+    });
+    const thumbProps = {
+      "aria-label": ariaLabel,
+      "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy),
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuetext": ariaValueText,
+      accessibleMaxText,
+      accessibleMinText,
+      disabled,
+      format,
+      max,
+      maxLabel,
+      min,
+      minLabel,
+      restrictToMarks,
+      showTooltip,
+      step,
+      stepMultiplier,
+      sliderValue: value
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      SliderTrack.SliderTrack,
+      {
+        disabled,
+        format,
+        handlePointerDown: handlePointerDownOnTrack,
+        isDragging,
+        isRange: true,
+        marks,
+        min,
+        minLabel,
+        max,
+        maxLabel,
+        progressPercentageRange: [
+          progressPercentageStart,
+          progressPercentageEnd
+        ],
+        ref,
+        sliderRef,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb.SliderThumb,
+            {
+              index: 0,
+              handleInputChange: (event) => handleInputChange(event, 0),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
+              offsetPercentage: `${utils.calculatePercentage(value[0], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 0,
+              isFocusVisible: isFocusVisible && thumbIndexState === 0,
+              inputRef: inputRefs[0],
+              onFocus: () => handleFocus(0),
+              onBlur: () => handleBlur(0),
+              ...thumbProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb.SliderThumb,
+            {
+              index: 1,
+              handleInputChange: (event) => handleInputChange(event, 1),
+              handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
+              handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
+              offsetPercentage: `${utils.calculatePercentage(value[1], max, min)}%`,
+              trackDragging: isDragging && thumbIndexState === 1,
+              isFocusVisible: isFocusVisible && thumbIndexState === 1,
+              inputRef: inputRefs[1],
+              onFocus: () => handleFocus(1),
+              onBlur: () => handleBlur(1),
+              ...thumbProps
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.RangeSlider = RangeSlider;
+//# sourceMappingURL=RangeSlider.js.map

package/dist-cjs/slider/RangeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = Array.from({ length: 2 }, () =>\n      useRef<HTMLInputElement>(null),\n    );\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["forwardRef","RangeSlider","useControlled","useRef","useFormFieldProps","clampRange","calculatePercentage","toFloat","values","useRangeSliderThumb","clsx","jsxs","SliderTrack","jsx","SliderThumb"],"mappings":"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"}