RangeSlider class

A Material Design range slider, extension of the original Flutter Slider.

Used to select a range of values using 2 thumbs.

A RangeSlider can be used to select from either a continuous or a discrete set of values. The default is to use a continuous range of values from min to max. To use discrete values, use a non-null value for divisions, which indicates the number of discrete intervals. For example, if min is 0.0 and max is 50.0 and divisions is 5, then the RangeSlider can take on the discrete values 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0.

The terms for the parts of a RangeSlider are:

  • The "thumb", which is a shape that slides horizontally when the user drags it.
  • The "track", which is the line that the slider thumb slides along.
  • The "value indicator", which is a shape that pops up when the user is dragging the active thumb to indicate the value lowerValue or upperValue being selected.

The RangeSlider will be disabled if onChanged is null.

The RangeSlider widget itself does not maintain any state. Instead, when the state of the RangeSlider changes, the widget calls the onChanged callback. Most widgets that use a RangeSlider will listen for the onChanged callback and rebuild the RangeSlider with a new set of values lowerValue and upperValue to update the visual appearance of the RangeSlider.

To know when the values start to change, or when it is done changing, set the optional callbacks onChangeStart and/or onChangeEnd.

By default, a RangeSlider will be as wide as possible, centered vertically. When given unbounded constraints, it will attempt to make the track 144 pixels wide (with margins on each side) and will shrink-wrap vertically.

Requires one of its ancestors to be a Material widget.

To determine how it should be displayed (e.g. colors, thumb shape, etc.), a RangeSlider uses the SliderThemeData available from either a SliderTheme widget or the ThemeData.sliderTheme a Theme widget above it in the widget tree.

See also:

Inheritance

Constructors

RangeSlider({Key? key, double min = 0.0, double max = 1.0, int? divisions, required double lowerValue, required double upperValue, RangeSliderCallback? onChanged, RangeSliderCallback? onChangeStart, RangeSliderCallback? onChangeEnd, bool showValueIndicator = false, double touchRadiusExpansionRatio = 3.33, int valueIndicatorMaxDecimals = 1, RangeSliderValueIndicatorFormatter? valueIndicatorFormatter, bool allowThumbOverlap = false})
Creates a material design RangeSlider.
const

Properties

allowThumbOverlap → bool
Allows thumbs to overlap (default: false)
final
divisions → int?
The number of discrete divisions.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lowerValue → double
The currently selected lower value.
final
max → double
The maximum value the user can select.
final
min → double
The minimum value the user can select.
final
onChanged → RangeSliderCallback?
Callback to invoke when the user is changing the values.
final
onChangeEnd → RangeSliderCallback?
Callback to invoke when the user ends the dragging
final
onChangeStart → RangeSliderCallback?
Callback to invoke when the user starts dragging
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showValueIndicator → bool
Do we show a label above the active thumb when the RangeSlider is active ?
final
touchRadiusExpansionRatio → double
The ratio with which to expand the thumb size, to increase (>1) or decrease (<1) the touch surface of the thumbs. It is advised to set this value such that the touch surface of a thumb becomes at least 40.0 x 40.0. The default thumbs have a radius of 6, so a value of at least 3.33 is advisable.
final
upperValue → double
The currently selected upper value.
final
valueIndicatorFormatter → RangeSliderValueIndicatorFormatter?
External function to format the value to be displayed in the label above the active thumb. Ignored if null.
final
valueIndicatorMaxDecimals → int
Max number of decimals when displaying the value in the label above the active thumb
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → _RangeSliderState
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited