Exposure Slider

A slider with a draggable ticker and progress ring for adjusting exposure values. It shows a circular indicator and allows precise control through notches. Use it in photo or video editing interfaces to adjust brightness levels. The component is styled with an accent color and supports touch and mouse interactions.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/exposure-slider

npx layro-cli add @educlopez/exposure-slider

npx layro-cli add @educlopez/exposure-slider

bunx layro-cli add @educlopez/exposure-slider

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
} from "motion/react";
import { useCallback, useRef } from "react";

export interface ExposureSliderProps {