RhombusKit

Slider

A slider lets users pick a numeric value — or a range between two values — by dragging a handle along a track. <rhombus-slider> wraps Material's <mat-slider> and drives the active track and handle from the --text-accent contract token, so it re-skins with the theme. Use mode="single" for one value or mode="range" for a { start, end } pair.

Example

50

Volume: 50

When to use

  • For choosing a value within a known, continuous, bounded range where the relative position matters more than the exact number (volume, brightness, price filters, zoom).
  • Use mode="range" for a min–max filter (e.g. a price band) instead of two separate sliders.

When not to use

  • When an exact, typed value matters — use a numeric Input.
  • For a small set of named choices, use a Radio Group or Select; for a binary on/off, a Switch.

Was this page helpful?