Slider | RiseUI

Single and range sliders with label/output and HeroUI-aligned track — see @heroui/react Slider and slider.css.

Usage

Label + output row, h-5 track, accent fill (HeroUI Default).

RiseSlider(
  value: volume,
  onChanged: (v) => setState(() => volume = v),
  label: const Text('Volume'),
)

Vertical

Output · track · label (HeroUI Vertical).

RiseSlider(
  value: volume,
  onChanged: (v) => setState(() => volume = v),
  orientation: RiseSliderOrientation.vertical,
  label: const Text('Volume'),
)

Range

Two thumbs, combined output (HeroUI Range).

RiseRangeSlider(
  values: range,
  min: 0,
  max: 1000,
  step: 50,
  onChanged: (v) => setState(() => range = v),
  label: const Text('Price Range'),
)

Disabled

Non-interactive slider.

RiseSlider(
  value: 30,
  onChanged: (_) {},
  isDisabled: true,
  label: const Text('Volume'),
)

Custom format

formatValue / formatRange for currency-style labels.

RiseSlider(
  value: price,
  max: 100,
  formatValue: (v) => '\$' + v.toStringAsFixed(2),
  onChanged: (v) => setState(() => price = v),
  label: const Text('Price'),
)