remold/ui

Range slider

A price range slider with a histogram behind it: while you drag a handle its price lifts out of the label and rides above the handle, then flies back when you let go.

Base UIMotion

Price per night
237 stays in this range

Things to try

  • Drag a handle. Its price moves from the label to above your finger.
  • Let go. The price flies back into the label.
  • Watch the bars. They darken inside your range, and the count below updates.

Install

npx shadcn@latest add https://your-docs-site/r/range-slider.json

Dependencies

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @base-ui/react @remold-ui/react motion

How it works

  • Built on Base UI. Slider with a thumb for each end gives dragging, keyboard and the minimum gap between them.
  • The price follows you. The label's price and the bubble share a Motion layoutId, so it travels between them.
The prices and counts are made up.

Promo code

A promo code field on a cinema ticket: apply a code and the field springs down into a green ticket chip with the code and what it's worth, while the discount line opens and the total rolls down. A code that doesn't work shakes the field and says why.

Split amount

Splitting a bill: tap someone at the table and their face flies into the split, the bar re-divides and every share rolls to the new amount, cents and all. Pick a tip, then request what you're owed. Built on Base UI's Button and Toggle Group.

On this page

Things to tryInstallDependenciesHow it works