How to use the @chakra-ui/utils.constrainValue function in @chakra-ui/utils

step,
  } = props;

  const [isPointerDown, setIsPointerDown] = React.useState(false);
  const [isFocused, setIsFocused] = React.useState(false);

  const [valueState, setValue] = React.useState(() => {
    if (defaultValue) return defaultValue;
    return isReversed ? max : min;
  });

  const [isControlled, _value] = useControllableValue(valueProp, valueState);

  // Constrain the value because it can't be less than min
  // or greater than max
  const value = constrainValue(_value, min, max);

  const reversedValue = max - value + min;
  const trackValue = isReversed ? reversedValue : value;
  const trackPercent = valueToPercent(trackValue, min, max);

  // A single place to update state for controlled/uncontrolled scenarios
  const updateValue = React.useCallback(
    newValue => {
      if (!isControlled) {
        setValue(newValue);
      }
      if (onChange) {
        onChange(newValue);
      }
    },
    [isControlled, onChange],

(value: number) => {
      let nextValue = value;
      nextValue = +roundValueToStep(nextValue, keyStep);
      nextValue = constrainValue(nextValue, min, max);
      updateValue(nextValue);
    },
    [keyStep, max, min, updateValue],

(value: number) => {
      let nextValue = value;
      if (keepWithinRange) {
        nextValue = constrainValue(nextValue, min, max);
      }
      return roundToPrecision(nextValue, precision);
    },
    [precision, keepWithinRange, max, min],

: clientX - trackRect.left;

        const length = isVertical ? trackRect.height : trackRect.width;
        let percent = diff / length;

        if (isReversed) {
          percent = 1 - percent;
        }

        let nextValue = percentToValue(percent, min, max);

        if (step) {
          nextValue = +roundValueToStep(nextValue, step);
        }

        nextValue = constrainValue(nextValue, min, max);
        return nextValue;
      }
    },
    [isVertical, isReversed, max, min, step],