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

To help you get started, weโ€™ve selected a few @chakra-ui/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chakra-ui / chakra-ui / packages / hooks / src / useSlider / useSlider.tsx View on Github external
(event: React.PointerEvent) => {
      if (trackRef.current) {
        const trackRect = trackRef.current.getBoundingClientRect();
        const { clientX, clientY } = event;
        let diff = isVertical
          ? trackRect.bottom - clientY
          : 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],