@gertalot/sliders

What is this?

@gertalot/sliders is a small React library with a number of custom hooks that make it easy to build sliders, dials, and other components that respond to dragging and sliding actions from the user. The hooks take care of all user interaction, such as dragging, rotating, using the mouse wheel, or two-finger scrolling.

Demo

Slider

Drag the slider, or use the mouse wheel. This component is created with a simple SVG, and uses the useSlider custom hook. The code for this component is on the useSlider documentation.

Drag the slider to adjust the volume, or use the mouse wheel

40%

Dial

Turn the dial to go up to eleven! Or use the mousewheel, or drag vertically. This component is an SVG and uses the useDial custom hook to handle all user interaction and returns an angle and a value to the component. The code for this component is on the useDial documentation.

Why does it exist?

For a project involving a climate-controlled environment, I needed something to control temperature and humidity, preferrably from my phone. This was an excellent excuse to put together this library. Moving the code that handles the user’s dragging, rotating, and scrolling actions out of my components and into reusable hooks seemed sensible, and I am sharing this in the hope it might be useful or educational for others.

Example

Here’s a minimal example of one of the custom hooks, useWheelToAdjust. These hooks take care of all user interaction and return properties you can use in your components. In this example, the hook returns a wheelDelta value representing the speed at which the user is rotating the mouse wheel.

Demo

Use the mouse wheel to change!

Scroll faster for coarse adjustments, and slower for fine adjustments

0.0

Code

UseWheelToAdjust.tsx

import { useRef, useState, useEffect } from "react";
import { useWheelToAdjust } from "@gertalot/sliders";

const UseWheelToAdjustComponent = () => {
  const dragAreaRef = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState(0);

  const { wheelDelta, isScrolling } = useWheelToAdjust({ dragAreaRef, sensitivity: 20 });

  useEffect(() => {
    if (isScrolling) {
      setValue((prev) => prev + wheelDelta);
    }
  }, [wheelDelta, isScrolling]);

  return (
    <div
      className="h-72 flex items-center justify-center bg-gray-900 p-0 border-white border-solid border-2 touch-none select-none"
      ref={dragAreaRef}
    >
      <div className="flex flex-col items-center space-y-2">
        <p className="text-xl">Use the mouse wheel to change!</p>
        <p className="text-center text-sm">Scroll faster for coarse adjustments, and slower for fine adjustments</p>
        <h1 className="text-2xl font-bold">{value.toFixed(1)}</h1>
      </div>
    </div>
  );
};

export default UseWheelToAdjustComponent;

To learn more about the hooks and how to use them, check out the docs!