how to rotate image using a slider? from -360 to 360

[advanced-cropper]

how to rotate image using a slider? from -360 to 360

[Mubasher-Skylinx]

    const rotate = (e) => {
        const rotationValue = Number(e.target.value);

        const rotationDifference = rotationValue - imageState.rotate;

        if (rotationDifference === 0) {
            cropperRef.current.reset();
            return;
        }

        const increment = rotationDifference > 0 ? 1 : -1;

        const rotationSteps = Math.abs(rotationDifference);

        for (let i = 0; i < rotationSteps; i++) {
            cropperRef.current?.rotateImage(increment);
        }

        setImageState((prevState) => {
            return {
                ...prevState,
                rotate: rotationValue,
            };
        });
    };

i have made this.

[Norserium]

@Mubasher-Skylinx, there is the react-mobile-cropper based on this library.

You can look at the source of the navigation block. It's slightly complicated, but you can take the important parts for you.

If you make the sandbox, I can try to do something.

[Mubasher-Skylinx]

https://codesandbox.io/s/flamboyant-fermat-zp538c?file=/src/styles/ImageEditor.css

here is the working example
please can you fix the the zoom functionality. when i zoom beyond to it automatically zoom too much and when i zoom out but not fully using slider it automatically zooms out to full even i haven't reached at left side of slider

and also can you improve my slider code for rotation

[Norserium]

@Mubasher-Skylinx, technically, you should do something like this. But the current algorithm of absolute zoom calculation may not fit to your requirements.

[Mubasher-Skylinx]

This is also good thank you