React Bits

Elastic Slider

A slider that grows under your cursor and stretches like rubber when pulled past either end, then springs back.

Elastic Slider, a React Bits component

Use Elastic Slider in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/ElasticSlider-TS-TW
How to install React Bits components

Related components

  • Card Swap

    A 3D stack of cards that sends the front card to the back on a timer, or when you fling it.

  • Chroma Grid

    A grid of grayscale photo cards where a spotlight follows the cursor and brings back color.

  • Decay Card

    An image card that tears and melts as the pointer moves, then pulls itself back together.