RangeSlider

A two-handle slider for picking a numeric (low, high) range. The selected interval is a filled bar between a solid active handle (●) and a hollow inactive one (○). Click the track to move the nearest handle, or drag to slide that handle. Left/Right move between the two handles (they sit low-left, high-right); Up/Down change the active handle’s value by step, PageUp/PageDown by largeStep, Home/End jump to min/max (still clamped so the handles can’t cross). Each arrow bubbles at its edge so focus can leave the widget — Left/Right past the outer handle, Up/Down once the value is pinned — and Tab is left free for traversal.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

RangeSlider(
  values: _range,
  min: 0,
  max: 100,
  label: 'Range',
  showValues: true,
  onChanged: (values) => setState(() => _range = values),
)

Details

Controlled — hold the values yourself and update them from onChanged. Passing null for onChanged disables the slider.

Constructors

RangeSlider()

Parameter	Type	Default	Description
values:	(num low, num high)	required	(low, high) in data space. low <= high is enforced — values passed reversed will be normalized at paint time.
onChanged:	void Function((num low, num high) values)?	required	Called with the new (low, high) tuple when either handle moves.
min:	num	required	Inclusive lower bound of the slider’s range.
max:	num	required	Inclusive upper bound of the slider’s range.
step:	num	1	Granularity of arrow-key moves.
largeStep:	num	10	Granularity of PageUp/PageDown moves.
label:	String?	—	Optional label exposed through the semantic app graph. When showValues is true, it is also shown before the readout.
showValues:	bool	false	When true, renders a low–high readout above the track (the active handle’s value is emphasized) and the min/max endpoints below it, so the numbers behind the bar are legible. Adds two rows of height.
focusNode:	FocusNode?	—	Focus node used for keyboard interaction.
autofocus:	bool	false	Whether the slider should request focus when mounted.
style:	CellStyle?	—	Base styling for the track and handles, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

RangeSlider is defined in packages/fleury/lib/src/catalog/range_slider.dart.

Category: Inputs & controls · All widgets

Live demo

rangeslider_example.dart

Restart Run Expand

Example · editable Revert Format

class _RangeSliderExampleState extends State<_RangeSliderExample> {
  (num, num) _v = (20, 70);
  @override
  Widget build(BuildContext context) => RangeSlider(
    values: _v,
    min: 0,
    max: 100,
    label: 'Range',
    showValues: true,
    autofocus: true,
    onChanged: (v) => setState(() => _v = v),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand