design-infraReport a problem or share feedback← Catalog
Exposure Slider
freesmoothui/exposure-slider
iOS-style exposure slider with draggable ticker and progress ring
$
npx shadcn@latest add @smoothui/exposure-slidernpm deps: motion
- Source
- SmoothUI
- Kind
- component
- Categories
- carousel
- Use as
- drop-in — replaces your component
- Applies to
- carousel
- Motion
- on drag, state · subtle · motion + svg · medium cost · respects reduced motion
- Tags
- slider, exposure, ios, ticker, progress-ring, gesture, drag, complexity-high, reduced-motion
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Three D Carouselcult-ui/three-d-carousel3D carousel component with perspective effects and smooth item transitions
- Coverflow Carouselsmoothui/coverflow-carousel3D coverflow (rotateY + depth + scale per offset) with drag/swipe, arrow keys, optional autoplay and an aria-live slide announcer; drag turns off under reduced motion (the upstream hasReducedMotion flag is wrong — the code uses useReducedMotion). Cards are bg-background with a foreground/10 ring. Prev/next come from @smoothui/smooth-button (auto-installed), which uses SmoothUI's smooth-N grey ramp from tokens.json.
- Cylinder Carouselbeui/cylinder-carouselA carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.