SfRangeSlider class

A Material Design range slider.

Used to select a range between min and max. It supports horizontal and vertical orientations. It also supports both numeric and date ranges.

The range slider elements are:

• The "track", which is the rounded rectangle in which the thumbs are slides over.
• The "thumb", which is a shape that slides horizontally when the user drags it.
• The "active" side of the range slider is between the left and right thumbs.
• The "inactive" side of the range slider is between the min value and the left thumb, and the right thumb and the max value. For RTL, the inactive side of the range slider is between the max value and the left thumb, and the right thumb and the min value.
• The "dividers", which is a shape that renders on the track based on the given interval value.
• The "ticks", which is a shape that rendered based on given interval value. Basically, it is rendered below the track. It is also called “major ticks”.
• The "minor ticks", which is a shape that renders between two major ticks based on given minorTicksPerInterval value. Basically, it is rendered below the track.
• The "labels", which is a text that rendered based on given interval value. Basically, it is rendered below the track and the major ticks.

The range slider will be disabled if onChanged is null or min is equal to max.

The range slider widget doesn’t maintains any state. Alternatively, the widget calls the onChanged callback with the new values when the state of range slider changes. To update the range slider’s visual appearance with the new values, rebuilds the range slider with the new values.

Range slider can be customized using the SfRangeSliderTheme with the help of SfRangeSliderThemeData, or the SfTheme with the help of SfThemeData. It is also possible to override the appearance using SfRangeSliderThemeData which were set using the properties of the widget like activeColor and inactiveColor.

Example

This snippet shows how to create a numeric SfRangeSlider.

SfRangeValues _values = SfRangeValues(4.0, 8.0);

@override
Widget build(BuildContext context) {
  return MaterialApp(
     home: Scaffold(
         body: Center(
             child: SfRangeSlider(
                    min: 0.0,
                    max: 10.0,
                    values: _values,
                    onChanged: (SfRangeValues newValues) {
                        setState(() {
                            _values = newValues;
                        });
                  },
             )
          )
      )
  );
}

This snippet shows how to create a date SfRangeSlider.

SfRangeValues _values = SfRangeValues(
      DateTime(2002, 01, 01), DateTime(2003, 01, 01));

SfRangeSlider(
 min: DateTime(2000, 01, 01, 00),
 max: DateTime(2005, 12, 31, 24),
 values: _values,
 interval: 1,
 dateFormat: DateFormat.y(),
dateIntervalType: DateIntervalType.years,
 onChanged: (SfRangeValues newValues) {
   setState(() {
     _values = newValues;
   });
 },
)

See also:

• SfTheme and SfThemeData, for customizing the visual appearance of the range slider.
• numberFormat and dateFormat, for formatting the numeric and date labels.
• SfRangeSliderThemeData, for customizing the visual appearance of the range slider.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• SfRangeSlider

Constructors

SfRangeSlider({Key? key, dynamic min = 0.0, dynamic max = 1.0, required SfRangeValues values, required ValueChanged<SfRangeValues>? onChanged, ValueChanged<SfRangeValues>? onChangeStart, ValueChanged<SfRangeValues>? onChangeEnd, double? interval, double? stepSize, SliderStepDuration? stepDuration, int minorTicksPerInterval = 0, bool showTicks = false, bool showLabels = false, bool showDividers = false, bool enableTooltip = false, bool shouldAlwaysShowTooltip = false, bool enableIntervalSelection = false, SliderDragMode dragMode = SliderDragMode.onThumb, Color? inactiveColor, Color? activeColor, LabelPlacement labelPlacement = LabelPlacement.onTicks, EdgeLabelPlacement edgeLabelPlacement = EdgeLabelPlacement.auto, NumberFormat? numberFormat, DateFormat? dateFormat, DateIntervalType? dateIntervalType, LabelFormatterCallback? labelFormatterCallback, TooltipTextFormatterCallback? tooltipTextFormatterCallback, RangeSliderSemanticFormatterCallback? semanticFormatterCallback, SfTrackShape trackShape = const SfTrackShape(), SfDividerShape dividerShape = const SfDividerShape(), SfOverlayShape overlayShape = const SfOverlayShape(), SfThumbShape thumbShape = const SfThumbShape(), SfTickShape tickShape = const SfTickShape(), SfTickShape minorTickShape = const SfMinorTickShape(), SfTooltipShape tooltipShape = const SfRectangularTooltipShape(), Widget? startThumbIcon, Widget? endThumbIcon})

Creates a horizontal SfRangeSlider.

const

SfRangeSlider.vertical({Key? key, dynamic min = 0.0, dynamic max = 1.0, required SfRangeValues values, required ValueChanged<SfRangeValues>? onChanged, ValueChanged<SfRangeValues>? onChangeStart, ValueChanged<SfRangeValues>? onChangeEnd, double? interval, double? stepSize, SliderStepDuration? stepDuration, int minorTicksPerInterval = 0, bool showTicks = false, bool showLabels = false, bool showDividers = false, bool enableTooltip = false, bool shouldAlwaysShowTooltip = false, bool enableIntervalSelection = false, SliderDragMode dragMode = SliderDragMode.onThumb, bool isInversed = false, Color? inactiveColor, Color? activeColor, LabelPlacement labelPlacement = LabelPlacement.onTicks, EdgeLabelPlacement edgeLabelPlacement = EdgeLabelPlacement.auto, NumberFormat? numberFormat, DateFormat? dateFormat, DateIntervalType? dateIntervalType, LabelFormatterCallback? labelFormatterCallback, TooltipTextFormatterCallback? tooltipTextFormatterCallback, RangeSliderSemanticFormatterCallback? semanticFormatterCallback, SfTrackShape trackShape = const SfTrackShape(), SfDividerShape dividerShape = const SfDividerShape(), SfOverlayShape overlayShape = const SfOverlayShape(), SfThumbShape thumbShape = const SfThumbShape(), SfTickShape tickShape = const SfTickShape(), SfTickShape minorTickShape = const SfMinorTickShape(), SfTooltipShape tooltipShape = const SfRectangularTooltipShape(), Widget? startThumbIcon, Widget? endThumbIcon, SliderTooltipPosition tooltipPosition = SliderTooltipPosition.left})

Creates a vertical SfRangeSlider.

const

Properties

activeColor → Color?

Color applied to the active track, thumb, overlay, and inactive dividers.

final

dateFormat → DateFormat?

Formats the date labels. It is mandatory for date SfRangeSlider.

final

dateIntervalType → DateIntervalType?

The type of date interval. It is mandatory for date SfRangeSlider.

final

dividerShape → SfDividerShape

Base class for SfRangeSlider dividers shapes.

final

dragMode → SliderDragMode

Represents the behavior of thumb dragging in the SfRangeSlider.

final

edgeLabelPlacement → EdgeLabelPlacement

Position of the edge labels.

final

enableIntervalSelection → bool

Option to select the particular interval based on the position of the tap or click.

final

enableTooltip → bool

Option to enable tooltips for both the thumbs.

final

endThumbIcon → Widget?

Sets the widget inside the right thumb.

final

hashCode → int

The hash code for this object.

no setter, inherited

inactiveColor → Color?

Color applied to the inactive track and active dividers.

final

interval → double?

Splits the range slider into given interval. It is mandatory if labels, major ticks and dividers are needed.

final

isInversed → bool

Option to inverse the range slider.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

labelFormatterCallback → LabelFormatterCallback?

Signature for formatting or changing the whole numeric or date label text.

final

labelPlacement → LabelPlacement

Option to place the labels either between the major ticks or on the major ticks.

final

max → dynamic

The maximum value that the user can select.

final

min → dynamic

The minimum value that the user can select.

final

minorTickShape → SfTickShape

Base class for SfRangeSlider minor tick shapes.

final

minorTicksPerInterval → int

Number of smaller ticks between two major ticks.

final

numberFormat → NumberFormat?

Formats the numeric labels.

final

onChanged → ValueChanged<SfRangeValues>?

Called when the user is selecting a new values for the slider by dragging.

final

onChangeEnd → ValueChanged<SfRangeValues>?

The onChangeEnd callback will be called when the user ends tap or drag the range slider.

final

onChangeStart → ValueChanged<SfRangeValues>?

The onChangeStart callback will be called when the user starts to tap or drag the range slider. This callback is only used to notify the user about the start interaction and it does not update the range slider value.

final

overlayShape → SfOverlayShape

Base class for SfRangeSlider overlay shapes.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

semanticFormatterCallback → RangeSliderSemanticFormatterCallback?

The callback used to create a semantic value from the slider's values.

final

shouldAlwaysShowTooltip → bool

Option to show tooltip always in range slider.

final

showDividers → bool

Option to render the dividers on the track.

final

showLabels → bool

Option to render the labels on given interval.

final

showTicks → bool

Option to render the major ticks on the track.

final

startThumbIcon → Widget?

Sets the widget inside the left thumb.

final

stepDuration → SliderStepDuration?

Option to select discrete date values.

final

stepSize → double?

Option to select discrete values.

final

thumbShape → SfThumbShape

Base class for SfRangeSlider thumb shapes.

final

tickShape → SfTickShape

Base class for SfRangeSlider major tick shapes.

final

tooltipShape → SfTooltipShape

Renders rectangular or paddle shape tooltip.

final

tooltipTextFormatterCallback → TooltipTextFormatterCallback?

Signature for formatting or changing the whole tooltip label text.

final

trackShape → SfTrackShape

Base class for SfRangeSlider track shapes.

final

values → SfRangeValues

The values currently selected in the range slider.

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<SfRangeSlider>

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, int wrapWidth = 65}) → 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