Improve range slider callbacks

src/components/RangeSlider/RangeSlider.stories.tsx

@@ -3,11 +3,13 @@ import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
 import { readableColor, toColorString } from 'polished';
 
+import { action } from '@storybook/addon-actions';
 import { withFoundryContext } from '../../../.storybook/decorators';
 import fonts from '../../enums/fonts';
 import colors from '../../enums/colors';
 import RangeSlider, { SlideRail } from './RangeSlider';
 import { RangeSliderProps, ValueProp } from './types';
+
 import Card from '../Card';
 
 const Row = styled.div`
@@ -102,7 +104,10 @@ export const Default: Story<DefaultProps> = ({
         min={min}
         max={max}
         debounceInterval={debounceInterval}
-        onDebounceChange={newVal => setVal(Math.round(newVal))}
+        onDebounceChange={newVal => {
+          action('onDebounceChange')(newVal);
+          setVal(Math.round(newVal));
+        }}
         dragHandleAttachment={dragHandleAttachment}
         values={[{ value: val, label: val }]}
         markers={markersArray as RangeSliderProps['markers']}
@@ -152,7 +157,10 @@ export const Rating: Story<RatingProps> = ({
         springOnRelease={springOnRelease}
         min={min}
         max={max}
-        onChange={newVal => setVal(Math.round(newVal))}
+        onChange={newVal => {
+          action('onChange')(newVal);
+          setVal(Math.round(newVal));
+        }}
         values={[
           {
             value: val,
@@ -250,7 +258,10 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           min={0}
           max={360}
           debounceInterval={debounceInterval}
-          onDebounceChange={val => setHue(Math.round(val))}
+          onDebounceChange={val => {
+            action('onDebounceChange hue')(val);
+            setHue(Math.round(val));
+          }}
           values={[
             {
               value: hue_,
@@ -275,7 +286,10 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           min={0}
           max={100}
           debounceInterval={debounceInterval}
-          onDebounceChange={val => setSat(Math.round(val))}
+          onDebounceChange={val => {
+            action('onDebounceChange saturation')(val);
+            setSat(Math.round(val));
+          }}
           showDomainLabels={false}
           showSelectedRange={false}
           values={[
@@ -304,7 +318,10 @@ export const ColorPicker: Story<ColorPickerProps> = ({
           min={0}
           max={100}
           debounceInterval={debounceInterval}
-          onDebounceChange={val => setLight(Math.round(val))}
+          onDebounceChange={val => {
+            action('onDebounceChange lightness')(val);
+            setLight(Math.round(val));
+          }}
           showDomainLabels={false}
           showSelectedRange={false}
           values={[

src/components/RangeSlider/RangeSlider.tsx

@@ -69,7 +69,7 @@ export const Container = styled.div`
 `;
 
 export const DragHandle = styled(a.div)`
-  ${({ $beingDragged = false, color, readonly }: HandleProps) => {
+  ${({ $beingDragged = false, color, $readonly }: HandleProps) => {
     const { colors } = useTheme();
     const handleColor = color || colors.primary;
     return `
@@ -88,7 +88,7 @@ export const DragHandle = styled(a.div)`
       touch-action: none;
       filter: url(#blur);
       cursor: ${$beingDragged ? 'grabbing' : 'grab'};
-      cursor: ${readonly ? 'default' : ''};
+      cursor: ${$readonly ? 'default' : ''};
       z-index: 2;
     `;
   }}
@@ -379,6 +379,8 @@ export const RangeSlider = ({
 
   const bind = useDrag(
     ({ down, movement: [deltaX] }) => {
+      if (readonly) return;
+
       const delta = (deltaX / sliderBounds.width) * domain;
       valueBuffer.current = clamp(delta, min, max);
       setDraggedHandle(down ? 0 : -1);
@@ -426,6 +428,13 @@ export const RangeSlider = ({
     }
   }, [springRef, pixelPositions, draggedHandle, prefersReducedMotion, sliderBounds]);
 
+  useEffect(() => {
+    return () => {
+      debouncedOnChange.cancel();
+      debouncedOnRelease.cancel();
+    };
+  }, [debouncedOnChange, debouncedOnRelease]);
+
   return (
     <StyledContainer
       data-test-id={['hs-ui-range-slider', testId].join('-')}
@@ -479,7 +488,7 @@ export const RangeSlider = ({
           key={`handle${i}`}
           ref={dragHandleRef}
           onMouseUp={() => debouncedOnRelease(value)}
-          readonly={readonly}
+          $readonly={readonly}
           {...dragHandleProps}
         >
           {showHandleLabels && (

src/components/RangeSlider/types.ts

@@ -19,7 +19,7 @@ export type ContainerProps = {
 export type HandleProps = {
   $beingDragged?: boolean;
   color: string;
-  readonly: boolean;
+  $readonly: boolean;
 };
 
 export type HandleLabelProps = { velocity?: number; showHandleLabels?: boolean };
@@ -84,7 +84,7 @@ export type RangeSliderProps = {
   testId?: string;
   markers?: number[] | ValueProp[];
   /**
-   * Whether the drag handle should follow the passed-in valule, or the mouse.
+   * Whether the drag handle should follow the passed-in value, or the mouse.
    */
   dragHandleAttachment?: 'value' | 'mouse';