We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SfSlider timezones not supported


I am trying to use the SFSlider to select a point in time between 2 datetimes. I use the popular timezone package (https://pub.dev/packages/timezone) in my app to manage timezone datetimes. This is a wrapper for the standard DateTime class. The SFSlider throws a runtime error when a TZDateTime object is used as the min and max times.

How I can support timezone datetimes with the SFSlider?

======== Exception caught by widgets library =======================================================

The following NoSuchMethodError was thrown building SfSlider(value: 2023-02-01 13:00:00.000+1000, min: 2023-02-01 12:00:00.000+1000, max: 2023-02-01 13:00:00.000+1000, interval: 30.0, stepSize: null, minorTicksPerInterval: 0, Ticks are showing, Labels are showing, Dividers are not showing, Tooltip is enabled, activeColor: Color(0x62ffffff), inactiveColor: Color(0xff2a2d3e), labelPlacement: onTicks, edgeLabelPlacement: auto, numberFormat: null, dateIntervalType: minutes, dependencies: [Directionality, SfSliderTheme, _InheritedTheme, _LocalizationsScope-[GlobalKey#e0700]], state: _SfSliderState#695cb(tickers: tracking 3 tickers)):


Dynamic call of null.

Receiver: Instance of 'TZDateTime'

Arguments: []

When the exception was thrown, this was the stack:

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw_

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 768:3 defaultNoSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 61:17 noSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 763:31 noSuchMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 283:12 callNSM

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 294:25 _checkAndCall

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:10 callMethod

dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 435:5 dsend

packages/syncfusion_flutter_sliders/src/slider_base.dart 489:46 get actualMax

packages/syncfusion_flutter_sliders/src/slider_base.dart 560:43 get adjustmentUnit

packages/syncfusion_flutter_sliders/src/slider_base.dart 564:22 get semanticActionUnit

packages/syncfusion_flutter_sliders/src/slider.dart 1939:40 get [_increasedValue]

packages/syncfusion_flutter_sliders/src/slider.dart 2300:35 describeSemanticsConfiguration

packages/flutter/src/rendering/object.dart 3102:7 get [_semanticsConfiguration]

Many Thanks


2 Replies

YG Yuvaraj Gajaraj Syncfusion Team February 16, 2023 02:05 PM UTC

Hi Arconomy,

We are validating your query at our end and we will update further details in one business day on 17 February 2023. We appreciate your patience until then.



LA Lavanya Anaimuthu Syncfusion Team February 17, 2023 10:54 AM UTC

Hi Arconomy,

You can achieve your requirement by converting the TZDateTime value to DateTime as per the following code snippet.



          min: DateTime.fromMillisecondsSinceEpoch(min.millisecondsSinceEpoch),

          max: DateTime.fromMillisecondsSinceEpoch(max.millisecondsSinceEpoch),



          interval: 1,

          showLabels: true,

          dateFormat: DateFormat.y(),

          dateIntervalType: DateIntervalType.years,

          onChanged: (dynamic newValue) {

            setState(() {

              value = newValue;






Description automatically generated with medium confidence

And we have shared the sample below for your reference and you can change the sample based on your requirement.


Lavanya A.

Attachment: f180572_7e4082d6.zip

Live Chat Icon For mobile
Up arrow icon