From 253fdcdc2515dac86cfb1bdb8735fe7fbb777691 Mon Sep 17 00:00:00 2001 From: HarshaMidadhalaKhajareddyMidadhala Date: Wed, 29 Jul 2026 12:58:36 +0530 Subject: [PATCH] Updated range-slider UG content --- Flutter/range-slider/accessibility.md | 122 +- Flutter/range-slider/basic-features.md | 624 +++--- Flutter/range-slider/drag-mode.md | 200 +- .../enabled-and-disabled-state.md | 330 +-- Flutter/range-slider/getting-started.md | 756 ++++--- .../how-to/custom-widget-on-flutterflow.md | 14 +- ...e-snippent.png => Adding-code-snippet.png} | Bin Flutter/range-slider/interval.md | 602 +++--- Flutter/range-slider/labels-and-divider.md | 1842 ++++++++++------- Flutter/range-slider/overview.md | 15 +- Flutter/range-slider/right-to-left.md | 131 +- Flutter/range-slider/shapes.md | 156 +- Flutter/range-slider/thumb-and-overlay.md | 966 +++++---- Flutter/range-slider/ticks.md | 778 +++---- Flutter/range-slider/tooltip.md | 768 ++++--- Flutter/range-slider/track.md | 386 ++-- 16 files changed, 4372 insertions(+), 3318 deletions(-) rename Flutter/range-slider/how-to/how-to-section-images/{Adding-code-snippent.png => Adding-code-snippet.png} (100%) diff --git a/Flutter/range-slider/accessibility.md b/Flutter/range-slider/accessibility.md index 23de5716a..83e83af46 100644 --- a/Flutter/range-slider/accessibility.md +++ b/Flutter/range-slider/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in Flutter Range Slider widget | Syncfusion description: Learn here all about the accessibility support in Syncfusion Flutter Range Slider (SfRangeSlider) widget. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- @@ -11,9 +11,9 @@ documentation: ug ## Keyboard support -This feature allows you to focus on the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it. +This feature allows you to focus on the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it. The value changes by [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepSize.html) (for numeric values) or [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepDuration.html) (for date values) per key press. -N> In [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time. +N> In [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time. ## Screen reader @@ -28,32 +28,42 @@ For iOS, you can adjust the value of each thumb by moving the focus to it and th {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 100.0, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value, SfThumb thumb){ - return 'The $thumb value is $value'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 100.0, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + semanticFormatterCallback: (dynamic value, SfThumb thumb) { + return 'The $thumb value is $value'; + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + ), ), - ); + ); + } } {% endhighlight %} @@ -64,32 +74,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); -@override -Widget build(BuildContext context) { - return MaterialApp( + @override + Widget build(BuildContext context) { + return MaterialApp( home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 100.0, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value, SfThumb thumb){ - return 'The $thumb value is $value'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 100.0, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + semanticFormatterCallback: (dynamic value, SfThumb thumb) { + return 'The $thumb value is $value'; + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + ), ), - ); + ); + } } {% endhighlight %} @@ -114,6 +134,6 @@ The font size of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_ * [`Label style`](https://help.syncfusion.com/flutter/range-slider/labels-and-divider#label-style) * [`Tooltip label style`](https://help.syncfusion.com/flutter/range-slider/tooltip#tooltip-label-style) -## Easily touch targets +## Touch targets -The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) has touch target as 48 * 48 as per the standard for all the elements. +The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) provides touch targets of 48 × 48 pixels for all interactive elements. diff --git a/Flutter/range-slider/basic-features.md b/Flutter/range-slider/basic-features.md index fedcb449e..b1c328432 100644 --- a/Flutter/range-slider/basic-features.md +++ b/Flutter/range-slider/basic-features.md @@ -2,7 +2,7 @@ layout: post title: Basic features in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the basic features in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- @@ -20,7 +20,7 @@ The maximum value that the user can select. The default value of [`max`](https:/ ## Values -It represents the values currently selected in the range slider. The range slider's thumb is drawn corresponding to this value. +It represents the values currently selected in the range slider. The range slider's thumbs are drawn corresponding to these values. For date values, the range slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) for date values. @@ -33,28 +33,35 @@ You can show numeric values in the range slider by setting `double` values to th {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - interval: 2, - showLabels: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + interval: 2, + showLabels: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -67,28 +74,35 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - interval: 2, - showLabels: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + interval: 2, + showLabels: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -107,30 +121,39 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} - SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -143,30 +166,39 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} - SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2004, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -178,30 +210,40 @@ Widget build(BuildContext context) { **onChangeStart** -The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChangeStart.html) callback is called when the user begins to interact with range slider using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range slider thumb. +The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChangeStart.html) callback is called when the user begins to interact with the range slider using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range slider thumb. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - onChangeStart: (SfRangeValues startValues) { - print('Interaction started'); - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ); +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + onChangeStart: (SfRangeValues startValues) { + debugPrint('Interaction started'); + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + ); + } } {% endhighlight %} @@ -209,30 +251,40 @@ Widget build(BuildContext context) { **onChangeEnd** -The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChangeEnd.html) callback is called when the user stops to interact with range slider using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range slider thumb. +The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChangeEnd.html) callback is called when the user stops interacting with the range slider using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range slider thumb. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - onChangeEnd: (SfRangeValues endValues) { - print('Interaction ended'); - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ); +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + onChangeEnd: (SfRangeValues endValues) { + debugPrint('Interaction ended'); + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + ); + } } {% endhighlight %} @@ -242,7 +294,7 @@ Widget build(BuildContext context) { The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback is called when the user selects a value through interaction. -N> The range slider passes the new values to the callback but does not change its state until the parent widget rebuilds the range slider with new values. +N> The range slider passes the new values to the callback but does not change its state until the parent widget rebuilds the range slider with the new values. N> If it is null, the range slider will be disabled. @@ -251,26 +303,33 @@ N> If it is null, the range slider will be disabled. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.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; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.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; + }); + }, + )))); + } } {% endhighlight %} @@ -283,26 +342,33 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -319,28 +385,35 @@ It represents the color applied to the active track, thumb, overlay, and inactiv {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - activeColor: Colors.red, - showDividers: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + activeColor: Colors.red, + showDividers: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -353,28 +426,35 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - activeColor: Colors.red, - showDividers: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + activeColor: Colors.red, + showDividers: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -386,38 +466,45 @@ Widget build(BuildContext context) { It represents the color applied to the inactive track and active dividers. -The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. +The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + activeColor: Colors.red, + inactiveColor: Colors.red.withValues(alpha: 0.2), + showDividers: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -430,29 +517,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + activeColor: Colors.red, + inactiveColor: Colors.red.withValues(alpha: 0.2), + showDividers: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/drag-mode.md b/Flutter/range-slider/drag-mode.md index 6fe249fca..2b0c6a6f9 100644 --- a/Flutter/range-slider/drag-mode.md +++ b/Flutter/range-slider/drag-mode.md @@ -2,7 +2,7 @@ layout: post title: Drag modes in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the multiple drag modes in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- @@ -11,38 +11,52 @@ documentation: ug ## On thumb -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.onThumb`, only individual thumb can be moved by dragging it. The nearest thumb will move to the touch position if interaction is done anywhere other than the thumb. The default value of the [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) property is `SliderDragMode.onThumb`. +When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.onThumb`, only an individual thumb can be moved by dragging it. The nearest thumb will move to the touch position if interaction is done anywhere other than the thumb. The default value of the [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) property is `SliderDragMode.onThumb`. + +N> The drag modes are applicable for both horizontal and vertical range sliders. The following example uses a horizontal `SfRangeSlider`; to render a vertical range slider, use `SfRangeSlider.vertical`. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2014, 01, 01), DateTime(2016, 01, 01)); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - height: 400, - width: 400, - child: SfRangeSlider( - min: DateTime(2010, 01, 01), - max: DateTime(2020, 01, 01), - dragMode: SliderDragMode.onThumb, - showLabels: true, - showTicks: true, - interval: 2, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - values: _values, - enableTooltip: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2014, 01, 01), DateTime(2016, 01, 01)); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + height: 400, + width: 400, + child: SfRangeSlider( + min: DateTime(2010, 01, 01), + max: DateTime(2020, 01, 01), + dragMode: SliderDragMode.onThumb, + showLabels: true, + showTicks: true, + interval: 2, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + values: _values, + enableTooltip: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -52,40 +66,52 @@ Widget build(BuildContext context) { ## Between thumbs -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.betweenThumbs`, both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. The range between the start and end thumb will always be the same. Hence, it is not possible to move the individual thumb. +When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.betweenThumbs`, both the thumbs can be moved at the same time by dragging in the area between the start and end thumbs. The range between the start and end thumbs will always be the same. Hence, it is not possible to move an individual thumb. N> It is applicable for both horizontal and vertical range slider. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2012, 01, 01), DateTime(2016, 01, 01)); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - height: 400, - width: 400, - child: SfRangeSlider( - min: DateTime(2010, 01, 01), - max: DateTime(2020, 01, 01), - dragMode: SliderDragMode.betweenThumbs, - showLabels: true, - showTicks: true, - interval: 2, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - values: _values, - enableTooltip: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2012, 01, 01), DateTime(2016, 01, 01)); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + height: 400, + width: 400, + child: SfRangeSlider( + min: DateTime(2010, 01, 01), + max: DateTime(2020, 01, 01), + dragMode: SliderDragMode.betweenThumbs, + showLabels: true, + showTicks: true, + interval: 2, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + values: _values, + enableTooltip: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -102,33 +128,45 @@ N> It is applicable for both horizontal and vertical range slider. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2014, 01, 01), DateTime(2016, 01, 01)); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - height: 400, - width: 400, - child: SfRangeSlider( - min: DateTime(2010, 01, 01), - max: DateTime(2020, 01, 01), - dragMode: SliderDragMode.both, - showLabels: true, - showTicks: true, - interval: 2, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - values: _values, - enableTooltip: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2014, 01, 01), DateTime(2016, 01, 01)); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + height: 400, + width: 400, + child: SfRangeSlider( + min: DateTime(2010, 01, 01), + max: DateTime(2020, 01, 01), + dragMode: SliderDragMode.both, + showLabels: true, + showTicks: true, + interval: 2, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + values: _values, + enableTooltip: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/range-slider/enabled-and-disabled-state.md b/Flutter/range-slider/enabled-and-disabled-state.md index 80dc31647..20995ddfe 100644 --- a/Flutter/range-slider/enabled-and-disabled-state.md +++ b/Flutter/range-slider/enabled-and-disabled-state.md @@ -1,15 +1,15 @@ --- layout: post -title: Enable & disable states in Flutter Range Slider widget | Syncfusion -description: Learn here all about enable & disable states in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +title: Enabled & Disabled States in Flutter Range Slider widget | Syncfusion +description: Learn here all about enabled and disabled states in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. +platform: flutter control: SfRangeSlider documentation: ug --- # Enabled and disabled states in Flutter Range Slider (SfRangeSlider) -This section helps to learn about the enabled and disabled state in the Flutter range slider. +This section explains the enabled and disabled states of the Flutter range slider. ## Enabled state @@ -20,26 +20,33 @@ The range slider will be in enabled state if [`onChanged`](https://pub.dev/docum {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.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; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.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; + }); + }, + )))); + } } {% endhighlight %} @@ -52,26 +59,33 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -88,22 +102,29 @@ The range slider will be in disabled state if [`onChanged`](https://pub.dev/docu {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - onChanged: null, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + onChanged: null, + )))); + } } {% endhighlight %} @@ -116,22 +137,29 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - onChanged: null, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + onChanged: null, + )))); + } } {% endhighlight %} @@ -141,7 +169,7 @@ Widget build(BuildContext context) { ## Disabled color -You can change, +You can change the following: * The color of the active and inactive track in disabled state using the [`disabledActiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTrackColor.html) and [`disabledInactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTrackColor.html) properties. * The color of the active and inactive major ticks in disabled state using the [`disabledActiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTickColor.html) and [`disabledInactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTickColor.html) properties. @@ -156,39 +184,47 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - disabledActiveTrackColor: Colors.orange, - disabledInactiveTrackColor: Colors.orange[200], - disabledActiveTickColor: Colors.orange, - disabledInactiveTickColor: Colors.orange[200], - disabledActiveMinorTickColor: Colors.orange, - disabledInactiveMinorTickColor: Colors.orange[200], - disabledActiveDividerColor: Colors.purple, - disabledInactiveDividerColor: Colors.purple[200], - disabledThumbColor: Colors.orange, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showDividers: true, - values: _values, - onChanged: null, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + disabledActiveTrackColor: Colors.orange, + disabledInactiveTrackColor: Colors.orange[200], + disabledActiveTickColor: Colors.orange, + disabledInactiveTickColor: Colors.orange[200], + disabledActiveMinorTickColor: Colors.orange, + disabledInactiveMinorTickColor: Colors.orange[200], + disabledActiveDividerColor: Colors.purple, + disabledInactiveDividerColor: Colors.purple[200], + disabledThumbColor: Colors.orange, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showDividers: true, + values: _values, + onChanged: null, + ), + )))); + } } {% endhighlight %} @@ -201,39 +237,47 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - disabledActiveTrackColor: Colors.orange, - disabledInactiveTrackColor: Colors.orange[200], - disabledActiveTickColor: Colors.orange, - disabledInactiveTickColor: Colors.orange[200], - disabledActiveMinorTickColor: Colors.orange, - disabledInactiveMinorTickColor: Colors.orange[200], - disabledActiveDividerColor: Colors.purple, - disabledInactiveDividerColor: Colors.purple[200], - disabledThumbColor: Colors.orange, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showDividers: true, - values: _values, - onChanged: null, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + disabledActiveTrackColor: Colors.orange, + disabledInactiveTrackColor: Colors.orange[200], + disabledActiveTickColor: Colors.orange, + disabledInactiveTickColor: Colors.orange[200], + disabledActiveMinorTickColor: Colors.orange, + disabledInactiveMinorTickColor: Colors.orange[200], + disabledActiveDividerColor: Colors.purple, + disabledInactiveDividerColor: Colors.purple[200], + disabledThumbColor: Colors.orange, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showDividers: true, + values: _values, + onChanged: null, + ), + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/getting-started.md b/Flutter/range-slider/getting-started.md index 84854e886..098befe78 100644 --- a/Flutter/range-slider/getting-started.md +++ b/Flutter/range-slider/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Flutter Range Slider Getting Started (SfRangeSlider) -This section explains the steps required to add the range slider widget and its elements such as numeric and date values, ticks, labels and tooltips. This section covers only basic features needed to know to get started with Syncfusion® range slider. +This section explains the steps required to add the range slider widget and its elements such as numeric and date values, ticks, labels and tooltips, covering only the basic features needed to get started with the Syncfusion® range slider. -To get start quickly with our Flutter Range Slider widget, you can check out this video. +To get started quickly with our Flutter Range Slider widget, check out this video. @@ -23,6 +23,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter range slider dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -30,6 +31,7 @@ dependencies: syncfusion_flutter_sliders: ^xx.x.xx {% endhighlight %} +{% endtabs %} N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Sliders`](https://pub.dev/packages/syncfusion_flutter_sliders/versions) package. @@ -37,18 +39,20 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Sliders` Run the following command to get the required packages. +{% tabs %} {% highlight dart %} -$ flutter pub get +flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_sliders/sliders.dart'; @@ -57,37 +61,43 @@ import 'package:syncfusion_flutter_sliders/sliders.dart'; ## Initialize range slider -After importing the package, initialize the range slider widget as a child of any widget. Here, the range slider widget is added as a child of the Container widget. The default value of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) properties of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) is 0.0 and 1.0 respectively. So, the [`values`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/values.html) property must be given within the range. +After importing the package, initialize the range slider widget as a child of any widget. Here, the range slider widget is added as a child of the Container widget. The default values of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) properties of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) are 0.0 and 1.0 respectively. So, the [`values`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/values.html) property must be given within the range. -N> The range slider passes the new values to the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback but does not change its state until the parent widget rebuilds the range slider with new values. +N> The range slider passes the new values to the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback but does not change its state until the parent widget rebuilds the range slider with the new values. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = const SfRangeValues(0.3, 0.7); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - child: SfRangeSlider( - values: _values, - onChanged: (dynamic values){ - setState(() { - _values = values; - }); - }, - ) - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(0.3, 0.7); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRangeSlider( + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ))))); + } } - + {% endhighlight %} {% endtabs %} @@ -98,26 +108,32 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = const SfRangeValues(0.3, 0.7); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - child: SfRangeSlider.vertical( - values: _values, - onChanged: (dynamic values){ - setState(() { - _values = values; - }); - }, - ) - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(0.3, 0.7); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRangeSlider.vertical( + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ))))); + } } {% endhighlight %} @@ -127,35 +143,42 @@ Widget build(BuildContext context) { ## Handle range change -The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback is used to get the current value of the range slider when the user selects a value through interaction. +The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback is used to get the current values of the range slider when the user selects a value through interaction. -N> The range slider passes the new values to the callback but does not change its state until the parent widget rebuilds the range slider with new values. +N> The range slider passes the new values to the callback but does not change its state until the parent widget rebuilds the range slider with the new values. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.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; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.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; + }); + }, + )))); + } } {% endhighlight %} @@ -168,26 +191,33 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -204,30 +234,40 @@ You can show numeric values in the range slider by setting `double` values to th {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider( - min: _min, - max: _max, - values: _values, - interval: 20, - showLabels: true, - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider( + min: _min, + max: _max, + values: _values, + interval: 20, + showLabels: true, + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -240,30 +280,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider.vertical( - min: _min, - max: _max, - values: _values, - interval: 20, - showLabels: true, - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider.vertical( + min: _min, + max: _max, + values: _values, + interval: 20, + showLabels: true, + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -282,32 +332,44 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -DateTime _min = DateTime(2008, 01, 01); -DateTime _max = DateTime(2018, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2012, 01, 01), DateTime(2014, 01, 01)); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider( - min: _min, - max: _max, - values: _values, - interval: 2, - showLabels: true, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + DateTime _min = DateTime(2008, 01, 01); + DateTime _max = DateTime(2018, 01, 01); + SfRangeValues _values = + SfRangeValues(DateTime(2012, 01, 01), DateTime(2014, 01, 01)); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider( + min: _min, + max: _max, + values: _values, + interval: 2, + showLabels: true, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -320,32 +382,44 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -DateTime _min = DateTime(2008, 01, 01); -DateTime _max = DateTime(2018, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2012, 01, 01), DateTime(2014, 01, 01)); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider.vertical( - min: _min, - max: _max, - values: _values, - interval: 2, - showLabels: true, - dateIntervalType: DateIntervalType.years, - dateFormat: DateFormat.y(), - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + DateTime _min = DateTime(2008, 01, 01); + DateTime _max = DateTime(2018, 01, 01); + SfRangeValues _values = + SfRangeValues(DateTime(2012, 01, 01), DateTime(2014, 01, 01)); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider.vertical( + min: _min, + max: _max, + values: _values, + interval: 2, + showLabels: true, + dateIntervalType: DateIntervalType.years, + dateFormat: DateFormat.y(), + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -362,31 +436,41 @@ You can enable ticks in the range slider using the [`showTicks`](https://pub.dev {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider( - min: _min, - max: _max, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider( + min: _min, + max: _max, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -399,57 +483,121 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider.vertical( - min: _min, - max: _max, +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider.vertical( + min: _min, + max: _max, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), + ), + ), + ); + } +} + +{% endhighlight %} +{% endtabs %} + +![Numeric range slider](images/getting-started/vertical_range_slider_with_tick.png) + +## Inverse the horizontal range slider + +You can invert the horizontal range slider by wrapping the range slider in the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and setting the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `TextDirection.rtl`. The [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget only affects horizontal sliders; to invert a vertical range slider, use the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/isInversed.html) property described in the [Inverse the vertical range slider](#inverse-the-vertical-range-slider) section. + +{% tabs %} +{% highlight Dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(20.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfRangeSlider( + min: 0, + max: 100, values: _values, interval: 20, showTicks: true, showLabels: true, - onChanged: (SfRangeValues value) { + onChanged: (SfRangeValues newValues) { setState(() { - _values = value; + _values = newValues; }); }, ), ), - ), - ); + ); + } } {% endhighlight %} {% endtabs %} -![Numeric range slider](images/getting-started/vertical_range_slider_with_tick.png) +![Inversed horizontal range slider](images/getting-started/inversed_horizontal_range_slider.png) -## Inverse the horizontal range slider +## Inverse the vertical range slider -You can invert the horizontal range slider by wrapping the range slider to the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget by setting [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `TextDirection.rtl`. +You can invert the vertical range slider using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/isInversed.html) property. The default value of the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/isInversed.html) property is `false`. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(20.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(20.0, 60.0); -@override -Widget build(BuildContext context) { - return Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: SfRangeSlider( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider.vertical( min: 0, max: 100, values: _values, interval: 20, + isInversed: true, showTicks: true, showLabels: true, onChanged: (SfRangeValues newValues) { @@ -458,42 +606,8 @@ Widget build(BuildContext context) { }); }, ), - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -![Inversed horizontal range slider](images/getting-started/inversed_horizontal_range_slider.png) - -## Inverse the vertical range slider - -You can invert the vertical range slider using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/isInversed.html) property. The default value of the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/isInversed.html) property is `false`. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _values = SfRangeValues(20.0, 60.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider.vertical( - min: 0, - max: 100, - values: _values, - interval: 20, - isInversed: true, - showTicks: true, - showLabels: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ); + ); + } } {% endhighlight %} @@ -514,32 +628,43 @@ I> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider( - min: _min, - max: _max, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider( + min: _min, + max: _max, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -552,32 +677,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -final double _min = 0; -final double _max = 100; -SfRangeValues _values = const SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - child: SfRangeSlider.vertical( - min: _min, - max: _max, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (SfRangeValues value) { - setState(() { - _values = value; - }); - }, +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + final double _min = 0; + final double _max = 100; + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfRangeSlider.vertical( + min: _min, + max: _max, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (SfRangeValues value) { + setState(() { + _values = value; + }); + }, + ), ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/range-slider/how-to/custom-widget-on-flutterflow.md b/Flutter/range-slider/how-to/custom-widget-on-flutterflow.md index 87609dc1a..5337392a2 100644 --- a/Flutter/range-slider/how-to/custom-widget-on-flutterflow.md +++ b/Flutter/range-slider/how-to/custom-widget-on-flutterflow.md @@ -7,7 +7,7 @@ control: SfRangeSlider documentation: ug --- -# How to add Syncfusion® RangeSlider widget in FlutterFlow? +# How to add Syncfusion® RangeSlider widget in Flutter? ## Overview @@ -22,8 +22,8 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 1. Navigate to the `Custom Code` section in the left side navigation menu. 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +4. Click the `View Boilerplate Code` button on the right side, represented by the icon `[]`. +5. A popup will appear with boilerplate code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,10 +52,10 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_sliders/example) tab in [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_sliders/example) tab in [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) and copy the widget-specific code sample. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) ### Compiling the codes @@ -73,3 +73,5 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. ![Page](how-to-section-images/page.png) + +>**Note**: To wire the custom widget to data, use FlutterFlow's [component parameters](https://docs.flutterflow.io/components/custom-components#adding-parameters) to expose the `values`, `min`, `max`, `onChanged`, and other properties from the custom widget, then bind those parameters to a [FlutterFlow state variable](https://docs.flutterflow.io/actions/backend/backend-actions) or [supabase/firebase data source](https://docs.flutterflow.io/data) from the right-hand properties panel. The custom widget's properties appear in the properties panel once they have been exposed as component parameters, allowing you to bind the slider's selected range to your page state. diff --git a/Flutter/range-slider/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/range-slider/how-to/how-to-section-images/Adding-code-snippet.png similarity index 100% rename from Flutter/range-slider/how-to/how-to-section-images/Adding-code-snippent.png rename to Flutter/range-slider/how-to/how-to-section-images/Adding-code-snippet.png diff --git a/Flutter/range-slider/interval.md b/Flutter/range-slider/interval.md index d09dc1025..34ec12a6c 100644 --- a/Flutter/range-slider/interval.md +++ b/Flutter/range-slider/interval.md @@ -2,17 +2,17 @@ layout: post title: Interval in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the Interval feature in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Interval in Flutter Range Slider (SfRangeSlider) -This section explains about how to add the intervals for numeric and date range slider. +This section explains how to set intervals for numeric and date range sliders. ## Numeric interval -Range slider elements like labels, ticks and dividers are rendered based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html), [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) properties. The default value is `null` and it must be greater than 0. +Range slider elements like labels, ticks and dividers are rendered based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html), [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) properties. The default value is `null`, and it must be greater than 0. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the range slider will render the labels, major ticks, and dividers at 0.0, 2.0, 4.0 and so on. @@ -21,29 +21,36 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -56,29 +63,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -99,36 +113,47 @@ For date values, the range slider does not have auto interval support. So, it is For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is `DateTime(2000, 01, 01)` and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is `DateTime(2005, 01, 01)` and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is `1`, [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateIntervalType.html) is `DateIntervalType.years`, [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) is `DateFormat.y()` then the range slider will render the labels, major ticks, and dividers at 2000, 2001, 2002 and so on. +N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. This applies to all the date-range code examples below. + ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -141,31 +166,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -175,38 +209,45 @@ Widget build(BuildContext context) { ## Discrete selection for numeric values -You can move the thumb in discrete manner for numeric values using the [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepSize.html) property in the range slider. +You can move the thumbs in a discrete manner for numeric values using the [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepSize.html) property of the range slider. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - stepSize: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + stepSize: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -219,31 +260,38 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - stepSize: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + stepSize: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -251,41 +299,50 @@ Widget build(BuildContext context) { ## Discrete selection for date values -You can move the thumb in discrete manner for date values based on the value provided in the [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepDuration.html) property in the range slider. +You can move the thumbs in a discrete manner for date values based on the value provided in the [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepDuration.html) property of the range slider. -For example, if [min](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is DateTime(2015, 01, 01) and [max](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is DateTime(2020, 01, 01) and [stepDuration](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepDuration.html) is SliderDuration(years: 1, months: 6),the range slider will move the thumbs at DateTime(2015, 01, 01), DateTime(2016, 07, 01), DateTime(2018, 01, 01),and DateTime(2019, 07, 01). +For example, if [min](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is `DateTime(2015, 01, 01)` and [max](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is `DateTime(2020, 01, 01)` and [stepDuration](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/stepDuration.html) is `SliderStepDuration(years: 1, months: 6)`, the range slider will move the thumbs to `DateTime(2015, 01, 01)`, `DateTime(2016, 07, 01)`, `DateTime(2018, 01, 01)`, and `DateTime(2019, 07, 01)`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - stepDuration: SliderStepDuration(years: 2), - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + stepDuration: const SliderStepDuration(years: 2), + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -298,32 +355,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - stepDuration: SliderStepDuration(years: 2), - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + stepDuration: const SliderStepDuration(years: 2), + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -331,40 +397,49 @@ Widget build(BuildContext context) { ## Enable interval selection -You can select a particular interval by tapping when setting the [`enableIntervalSelection`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableIntervalSelection.html) property as `true`. Both the thumbs will be moved to the current interval with animation. +You can select a particular interval by tapping when setting the [`enableIntervalSelection`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableIntervalSelection.html) property to `true`. Both the thumbs will be moved to the current interval with animation. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - enableIntervalSelection: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + enableIntervalSelection: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -377,33 +452,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01), - max: DateTime(2010, 01, 01), - interval: 2, - enableIntervalSelection: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2004, 01, 01), DateTime(2006, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01), + max: DateTime(2010, 01, 01), + interval: 2, + enableIntervalSelection: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/labels-and-divider.md b/Flutter/range-slider/labels-and-divider.md index 580551679..4f191a6bb 100644 --- a/Flutter/range-slider/labels-and-divider.md +++ b/Flutter/range-slider/labels-and-divider.md @@ -2,13 +2,13 @@ layout: post title: Labels in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the Labels feature in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Labels in Flutter Range Slider (SfRangeSlider) -This section explains about how to add the labels and dividers in the range slider. +This section explains how to add labels and dividers to the range slider. ## Show labels @@ -19,29 +19,36 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/late {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showLabels: true, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showLabels: true, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -50,32 +57,40 @@ Widget build(BuildContext context) { ![Range slider label support](images/label-and-divider/show-labels.png) ### Vertical + {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showLabels: true, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showLabels: true, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -98,30 +113,38 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - values: _values, - interval: 2, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + values: _values, + interval: 2, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -134,30 +157,38 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - values: _values, - interval: 2, - showTicks: true, - showLabels: true, - numberFormat: NumberFormat("\$"), - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + values: _values, + interval: 2, + showTicks: true, + showLabels: true, + numberFormat: NumberFormat("\$"), + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -167,9 +198,9 @@ Widget build(BuildContext context) { ## Date format -The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) property is used to format the date labels. It is mandatory for date [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). For date values, the range slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) property is `null`. +The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) property is used to format the date labels. It is mandatory for the date [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). For date values, the range slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html) property is `null`. -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. +N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. This applies to all the date format code examples below. ### Year format @@ -178,31 +209,40 @@ N> You must import [`intl`](https://pub.dev/packages/intl) package for formattin {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -215,31 +255,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -254,31 +303,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2000, 03, 01), DateTime(2000, 07, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2000, 09, 01, 24), - values: _values, - interval: 2, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2000, 03, 01), DateTime(2000, 07, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2000, 09, 01, 23), + values: _values, + interval: 2, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.yM(), + dateIntervalType: DateIntervalType.months, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -291,31 +349,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2000, 03, 01), DateTime(2000, 07, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2000, 09, 01, 24), - values: _values, - interval: 2, - showLabels: true, - showTicks: true, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2000, 03, 01), DateTime(2000, 07, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2000, 09, 01, 23), + values: _values, + interval: 2, + showLabels: true, + showTicks: true, + dateFormat: DateFormat.yM(), + dateIntervalType: DateIntervalType.months, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -330,31 +397,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2000, 01, 01, 07, 00, 00), DateTime(2000, 01, 01, 17, 00, 00)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 02, 00, 00), - max: DateTime(2000, 01, 01, 22, 00, 00), - values: _values, - interval: 5, - showLabels: true, - showTicks: true, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = SfRangeValues( + DateTime(2000, 01, 01, 07, 00, 00), DateTime(2000, 01, 01, 17, 00, 00)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 02, 00, 00), + max: DateTime(2000, 01, 01, 22, 00, 00), + values: _values, + interval: 5, + showLabels: true, + showTicks: true, + dateFormat: DateFormat('h:mm a'), + dateIntervalType: DateIntervalType.hours, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -367,31 +443,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2000, 01, 01, 07, 00, 00), DateTime(2000, 01, 01, 17, 00, 00)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 02, 00, 00), - max: DateTime(2000, 01, 01, 22, 00, 00), - values: _values, - interval: 5, - showLabels: true, - showTicks: true, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = SfRangeValues( + DateTime(2000, 01, 01, 07, 00, 00), DateTime(2000, 01, 01, 17, 00, 00)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 02, 00, 00), + max: DateTime(2000, 01, 01, 22, 00, 00), + values: _values, + interval: 5, + showLabels: true, + showTicks: true, + dateFormat: DateFormat('h:mm a'), + dateIntervalType: DateIntervalType.hours, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -399,7 +484,7 @@ Widget build(BuildContext context) { ![Hour date format support](images/label-and-divider/vertical-hour-date-format.png) -N> Refer the [`DateFormat`](https://api.flutter.dev/flutter/intl/DateFormat-class.html) class for other date format. +N> Refer the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class for other date formats. ## Label placement @@ -410,32 +495,41 @@ The [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/ {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - labelPlacement: LabelPlacement.betweenTicks, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + labelPlacement: LabelPlacement.betweenTicks, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -448,32 +542,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - labelPlacement: LabelPlacement.betweenTicks, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + labelPlacement: LabelPlacement.betweenTicks, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -492,32 +595,41 @@ The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfu {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - edgeLabelPlacement: EdgeLabelPlacement.inside, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = + SfRangeValues(DateTime(2002, 01, 01), DateTime(2003, 01, 01)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -530,32 +642,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2002), DateTime(2003)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - edgeLabelPlacement: EdgeLabelPlacement.inside, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = SfRangeValues(DateTime(2002), DateTime(2003)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2005, 01, 01, 00), + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -578,31 +698,41 @@ You can format or change the whole numeric or date label text using the [`labelF {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(100.0, 9900.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 100.0, - max: 10000.0, - values: _values, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(100.0, 9900.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 100.0, + max: 10000.0, + values: _values, + showLabels: true, + interval: 9900, + labelFormatterCallback: + (dynamic actualValue, String formattedText) { + return actualValue == 10000 + ? '\$ $formattedText+' + : '\$ $formattedText'; + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -615,31 +745,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(100.0, 9900.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 100.0, - max: 10000.0, - values: _values, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(100.0, 9900.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 100.0, + max: 10000.0, + values: _values, + showLabels: true, + interval: 9900, + labelFormatterCallback: + (dynamic actualValue, String formattedText) { + return actualValue == 10000 + ? '\$ $formattedText+' + : '\$ $formattedText'; + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -651,48 +791,58 @@ Widget build(BuildContext context) { You can change the active and inactive label appearance of the range slider using the [`activeLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeLabelStyle.html) and [`inactiveLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveLabelStyle.html) properties respectively. -The active side of the range slider is between start and end thumbs. +The active side of the range slider is between the start and end thumbs. -The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. +The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the remaining code examples in this section that use `SfRangeSliderThemeData`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeLabelStyle: const TextStyle( + color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), + inactiveLabelStyle: TextStyle( + color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -705,35 +855,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - interval: 1, - showLabels: true, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeLabelStyle: const TextStyle( + color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), + inactiveLabelStyle: TextStyle( + color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + interval: 1, + showLabels: true, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -745,11 +905,20 @@ Widget build(BuildContext context) { You can now customize the appearance of each label on the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) individually by using the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onLabelCreated.html) callback. This callback allows you to have complete control over the text and text style for each label. -## Horizontal +### Horizontal {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { SfRangeValues _values = const SfRangeValues(4.0, 8.0); @override @@ -778,33 +947,42 @@ You can now customize the appearance of each label on the [`SfRangeSlider`](http final int end = _values.end.toInt(); return RangeSliderLabel( text: text, - textStyle: - (value == start || value == end) - ? const TextStyle( - color: Colors.blue, - fontSize: 14, - ) - : TextStyle( - color: Colors.red[200], - fontSize: 10, - ), + textStyle: (value == start || value == end) + ? const TextStyle( + color: Colors.blue, + fontSize: 14, + ) + : TextStyle( + color: Colors.red[200], + fontSize: 10, + ), ); }, ), ), ); } +} {% endhighlight %} {% endtabs %} ![Individual label style support](images/label-and-divider/slider-individual-label-color.png) -## Vertical +### Vertical {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { SfRangeValues _values = const SfRangeValues(4.0, 8.0); @override @@ -833,22 +1011,22 @@ You can now customize the appearance of each label on the [`SfRangeSlider`](http final int end = _values.end.toInt(); return RangeSliderLabel( text: text, - textStyle: - (value == start || value == end) - ? const TextStyle( - color: Colors.blue, - fontSize: 14, - ) - : TextStyle( - color: Colors.red[200], - fontSize: 10, - ), + textStyle: (value == start || value == end) + ? const TextStyle( + color: Colors.blue, + fontSize: 14, + ) + : TextStyle( + color: Colors.red[200], + fontSize: 10, + ), ); }, ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -857,9 +1035,7 @@ You can now customize the appearance of each label on the [`SfRangeSlider`](http ## Label offset -You can adjust the space between ticks and labels of the range slider using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can adjust the space between the ticks and labels of the range slider using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property. ### Horizontal @@ -869,34 +1045,42 @@ The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_fl {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - labelOffset: Offset(0.0, 10.0), - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - interval: 2, - showTicks: true, - showLabels: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + labelOffset: const Offset(0.0, 10.0), + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + interval: 2, + showTicks: true, + showLabels: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -912,34 +1096,42 @@ The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_fl {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - labelOffset: Offset(10.0, 0.0), - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - interval: 2, - showTicks: true, - showLabels: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + labelOffset: const Offset(10.0, 0.0), + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + interval: 2, + showTicks: true, + showLabels: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -949,43 +1141,53 @@ Widget build(BuildContext context) { ## Show dividers -The [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showDividers.html) property is used to render the dividers on the track. The default value of [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showDividers.html) property is `false`. It is a shape which is used to represent the major interval points of the track. +The [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showDividers.html) property is used to render the dividers on the track. The default value of [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showDividers.html) property is `false`. It is a shape which is used to mark the major interval points on the track. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the range slider will render the dividers at 0.0, 2.0, 4.0 and so on. +N> The examples in the divider sections below use `SfRangeSliderThemeData`. You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). + ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - ), - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + ), + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -998,34 +1200,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - ), - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + ), + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1037,43 +1247,49 @@ Widget build(BuildContext context) { You can change the active and inactive divider radius of the range slider using the [`activeDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerRadius.html) and the [`inactiveDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerRadius.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5 - ), - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 5, + inactiveDividerRadius: 5, + ), + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1086,36 +1302,44 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5 - ), - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 5, + inactiveDividerRadius: 5, + ), + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1129,47 +1353,53 @@ You can change the active and inactive divider stroke width of the range slider Also, you can change the active and inactive divider stroke color of the range slider using the [`activeDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeColor.html) and the [`inactiveDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeColor.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius:4 , - inactiveDividerRadius: 4, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 4, + inactiveDividerRadius: 4, + activeDividerStrokeColor: Colors.red, + activeDividerStrokeWidth: 2, + inactiveDividerStrokeWidth: 2, + inactiveDividerStrokeColor: Colors.red, + ), + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1182,40 +1412,48 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius:4 , - inactiveDividerRadius: 4, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + activeDividerRadius: 4, + inactiveDividerRadius: 4, + activeDividerStrokeColor: Colors.red, + activeDividerStrokeWidth: 2, + inactiveDividerStrokeWidth: 2, + inactiveDividerStrokeColor: Colors.red, + ), + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1227,43 +1465,49 @@ Widget build(BuildContext context) { You can change the active and inactive divider color of the range slider using the [`activeDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerColor.html) and [`inactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerColor.html) properties respectively. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(2.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(2.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + activeDividerColor: Colors.red, + inactiveDividerColor: Colors.red[200], + ), + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -1276,36 +1520,44 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(2.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 1, - showDividers: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ) - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(2.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 5, + inactiveTrackHeight: 5, + activeDividerColor: Colors.red, + inactiveDividerColor: Colors.red[200], + ), + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 1, + showDividers: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/overview.md b/Flutter/range-slider/overview.md index a410f3629..2c7c85e7d 100644 --- a/Flutter/range-slider/overview.md +++ b/Flutter/range-slider/overview.md @@ -2,7 +2,7 @@ layout: post title: About Flutter Range Slider widget | Syncfusion description: Learn here all about the introduction of Syncfusion Flutter Range Slider (SfRangeSlider) widget, its features, and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- @@ -15,9 +15,10 @@ Syncfusion® Flutter Range Slider is a highly interactive UI widge ## Features -* **Numeric and date support** - Provides functionality for selecting numeric and date ranges. For date ranges, support is provided up to the seconds interval. -* **Labels** - Renders labels for date and numeric ranges with options to customize their format based on your requirements. -* **Ticks and dividers** - Provides options to show ticks and dividers based on intervals. Also enables minor ticks to indicate values between each interval. These features present the selected range in a more intuitive way for end users. -* **Highly customizable** - In addition to the rich set of built-in features, the control can be fully customized in a simple way using the wide range of provided options. -* **Tooltips** - Renders tooltips to clearly show the selected range. It is also possible to customize the format of text shown in tooltips. -* **Orientation** - Supports both horizontal and vertical orientations. \ No newline at end of file +* **Numeric and date support** - Provides functionality for selecting numeric and date ranges. For date ranges, support is provided up to the seconds interval. For more details, refer to the [Set numeric range](./getting-started.md#set-numeric-range) and [Set date range](./getting-started.md#set-date-range) sections. +* **Labels** - Renders labels for date and numeric ranges with options to customize their format based on your requirements. For more details, refer to the [Labels](./labels.md) documentation. +* **Ticks and dividers** - Provides options to show ticks and dividers based on intervals. Also enables minor ticks to indicate values between each interval. These features present the selected range in a more intuitive way for end users. For more details, refer to the [Ticks and dividers](./ticks.md) documentation. +* **Highly customizable** - In addition to the rich set of built-in features, the control is fully customizable through its wide range of options. +* **Tooltips** - Renders tooltips to clearly show the selected range. It is also possible to customize the format of text shown in tooltips. For more details, refer to the [Tooltips](./tooltip.md) documentation. +* **Orientation** - Supports both horizontal and vertical orientations. For more details, refer to the [Horizontal](./getting-started.md#horizontal) and [Vertical](./getting-started.md#vertical) sections. +* **Thumb icon support** - Accepts custom widgets like icons or text inside the thumbs. For more details, refer to the [Thumb icon support](./thumb-customization.md) documentation. \ No newline at end of file diff --git a/Flutter/range-slider/right-to-left.md b/Flutter/range-slider/right-to-left.md index 555a595a1..f120e71d7 100644 --- a/Flutter/range-slider/right-to-left.md +++ b/Flutter/range-slider/right-to-left.md @@ -2,7 +2,7 @@ layout: post title: RTL in Flutter Range Slider widget | Syncfusion description: This section explains about the RTL rendering in Syncfusion Flutter Range Slider (SfRangeSlider) widget. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## RTL rendering ways -Right to left rendering can be achieved in the following ways: +Right-to-left rendering can be achieved in the following ways: ### Wrapping the SfRangeSlider with Directionality widget @@ -20,32 +20,42 @@ The range slider can be wrapped inside the [`Directionality`](https://api.flutte {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { return MaterialApp( - home: Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: Center( - child: SfRangeSlider( - min: 0.0, - max: 100.0, - values: _values, - interval: 20, - showTicks: true, - showLabels: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) + home: Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: Center( + child: SfRangeSlider( + min: 0.0, + max: 100.0, + values: _values, + interval: 20, + showTicks: true, + showLabels: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, ), - ) + ), + ), + ), ); + } } {% endhighlight %} @@ -53,10 +63,10 @@ Widget build(BuildContext context) { ### Changing the locale to RTL languages -The range slider will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. This can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file. +The range slider will render in the right-to-left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. This can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the `flutter_localizations` package to your pubspec.yaml file. {% tabs %} -{% highlight Dart %} +{% highlight dart %} dependencies: flutter_localizations: @@ -68,36 +78,47 @@ dependencies: {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale("fa", "IR"), - ], - locale: Locale("fa", "IR"), - home: Scaffold( - backgroundColor: Colors.white, - body: SfRangeSlider( - min: 0.0, - max: 100.0, - values: _values, - interval: 20.0, - showLabels: true, - showTicks: true, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [ + Locale("fa", "IR"), + ], + locale: const Locale("fa", "IR"), + home: Scaffold( + backgroundColor: Colors.white, + body: SfRangeSlider( + min: 0.0, + max: 100.0, + values: _values, + interval: 20.0, + showLabels: true, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), ), - ), - ); + ); + } } {% endhighlight %} diff --git a/Flutter/range-slider/shapes.md b/Flutter/range-slider/shapes.md index 98df12fc7..da4efd9d6 100644 --- a/Flutter/range-slider/shapes.md +++ b/Flutter/range-slider/shapes.md @@ -2,14 +2,14 @@ layout: post title: Custom shapes in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the custom shapes in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Shapes in Flutter Range Slider (SfRangeSlider) -This section helps to learn about how to customize the shapes of the range slider elements. +This section explains how to customize the shapes of the range slider elements. ## Track shape @@ -19,19 +19,29 @@ You can change the size and shape of the track using the [`trackShape`](https:// * paint() - Used to change the track shape. N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider track. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector track. +* For the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html), use the `thumbCenter` and `currentValue` parameters of the `paint` override method when customizing the track. +* For the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) and `SfRangeSelector`, use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the `paint` override method when customizing the track. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(3.0, 7.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSliderTheme( - data: SfRangeSliderThemeData( +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(3.0, 7.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSliderTheme( + data: const SfRangeSliderThemeData( activeTrackHeight: 10, inactiveTrackHeight: 10, ), @@ -47,10 +57,12 @@ Widget build(BuildContext context) { }, ), ), - ); + ); + } } class _TrackShape extends SfTrackShape { + @override void paint(PaintingContext context, Offset offset, Offset? thumbCenter, Offset? startThumbCenter, Offset? endThumbCenter, {required RenderBox parentBox, @@ -88,20 +100,29 @@ You can change the size and shape of the thumb using the [`thumbShape`](https:// * paint() - Used to change the thumb shape. N> -* You must use the `currentValue` parameter of paint override method for customizing slider thumb. -* You must use the `currentValues` parameter of paint override method for customizing range slider and range selector thumbs. +* For the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html), use the `currentValue` parameter of the `paint` override method when customizing the thumb. +* For the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) and `SfRangeSelector`, use the `currentValues` parameter of the `paint` override method when customizing the thumbs. {% tabs %} {% highlight Dart %} -double _min = 0.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(2.0, 6.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider( +class _HomePageState extends State { + final double _min = 0.0; + final double _max = 10.0; + SfRangeValues _values = const SfRangeValues(2.0, 6.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider( min: _min, max: _max, values: _values, @@ -112,7 +133,8 @@ Widget build(BuildContext context) { }); }, ), - ); + ); + } } class _SfThumbShape extends SfThumbShape { @@ -155,18 +177,27 @@ You can change the size and shape of the divider using the [`dividerShape`](http * paint() - Used to change the divider shape. N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider divider. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector divider. +* For the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html), use the `thumbCenter` and `currentValue` parameters of the `paint` override method when customizing the divider. +* For the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) and `SfRangeSelector`, use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the `paint` override method when customizing the divider. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(2.0, 6.0); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider( +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(2.0, 6.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider( min: 0.0, max: 10.0, values: _values, @@ -179,29 +210,30 @@ Widget build(BuildContext context) { }); }, ), - ); + ); + } } class _DividerShape extends SfDividerShape { - @override - void paint(PaintingContext context, Offset center, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Paint? paint, - required Animation enableAnimation, - required TextDirection textDirection}) { - final bool isActive = - center.dx >= startThumbCenter!.dx && center.dx <= endThumbCenter!.dx; - context.canvas.drawRect( - Rect.fromCenter(center: center, width: 5.0, height: 10.0), - Paint() - ..isAntiAlias = true - ..style = PaintingStyle.fill - ..color = isActive ? themeData.activeTrackColor! : Colors.white); - } + @override + void paint(PaintingContext context, Offset center, Offset? thumbCenter, + Offset? startThumbCenter, Offset? endThumbCenter, + {required RenderBox parentBox, + required SfSliderThemeData themeData, + SfRangeValues? currentValues, + dynamic currentValue, + required Paint? paint, + required Animation enableAnimation, + required TextDirection textDirection}) { + final bool isActive = + center.dx >= startThumbCenter!.dx && center.dx <= endThumbCenter!.dx; + context.canvas.drawRect( + Rect.fromCenter(center: center, width: 5.0, height: 10.0), + Paint() + ..isAntiAlias = true + ..style = PaintingStyle.fill + ..color = isActive ? themeData.activeTrackColor! : Colors.white); + } } {% endhighlight %} @@ -217,18 +249,29 @@ You can change the size and shape of the major and minor ticks using the [`tickS * paint() - Used to change the ticks shape. N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider ticks. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector ticks. +* For the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html), use the `thumbCenter` and `currentValue` parameters of the `paint` override method when customizing the ticks. +* For the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) and `SfRangeSelector`, use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of the `paint` override method when customizing the ticks. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(2.0, 6.0); +import 'dart:math' as math; + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSlider( +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(2.0, 6.0); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfRangeSlider( min: 0.0, max: 10.0, values: _values, @@ -243,7 +286,8 @@ Widget build(BuildContext context) { }); }, ), - ); + ); + } } class _TickShape extends SfTickShape { diff --git a/Flutter/range-slider/thumb-and-overlay.md b/Flutter/range-slider/thumb-and-overlay.md index 5dabc2c30..11d027d13 100644 --- a/Flutter/range-slider/thumb-and-overlay.md +++ b/Flutter/range-slider/thumb-and-overlay.md @@ -2,57 +2,65 @@ layout: post title: Thumb in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the thumb and thumb overlay features in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Thumb and Thumb overlay in Flutter Range Slider (SfRangeSlider) -This section helps to learn about how to customize the thumb and thumb overlay in the range slider. +This section explains how to customize the thumb and thumb overlay in the range slider. * Thumb - It is one of the elements of range slider which can be used to drag and change the selected values of the range slider. -* Thumb overlay - It is rendered around the thumb while interacting with them. +* Thumb overlay - It is rendered around the thumb while interacting with it. -## Thumb size +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the code examples in this section except the [Thumb icon](#thumb-icon) section, which uses properties exposed directly on `SfRangeSlider`. -You can change the size of the thumb in the range slider using the [`thumbRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/thumbRadius.html) property. +## Thumb size -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the size of the thumb in the range slider using the [`thumbRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbRadius.html) property. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbRadius: 13, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbRadius: 13, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -65,34 +73,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbRadius: 13, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbRadius: 13, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -102,43 +118,49 @@ Widget build(BuildContext context) { ## Thumb color -You can change the color of the thumb in the range slider using the [`thumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/thumbColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the color of the thumb in the range slider using the [`thumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbColor.html) property. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbColor: Colors.red, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbColor: Colors.red, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -151,34 +173,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbColor: Colors.red, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbColor: Colors.red, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -188,44 +218,50 @@ Widget build(BuildContext context) { ## Thumb stroke width and stroke color -You can change the thumb stroke width using the [`thumbStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/thumbStrokeWidth.html) property and thumb stroke color using the [`thumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/thumbStrokeColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the thumb stroke width using the [`thumbStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeWidth.html) property and thumb stroke color using the [`thumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeColor.html) property. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbStrokeWidth: 3, + thumbStrokeColor: Colors.red, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -238,35 +274,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbStrokeWidth: 3, + thumbStrokeColor: Colors.red, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -283,45 +327,49 @@ You can show the custom widgets like icon or text inside the thumbs using the [` {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(5.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - startThumbIcon: Icon( - Icons.arrow_back_ios, - color: Colors.blue, - size: 20.0), - endThumbIcon: Icon( - Icons.arrow_forward_ios, - color: Colors.blue, - size: 20.0), - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(5.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbColor: Colors.white, + thumbRadius: 15, + thumbStrokeWidth: 2, + thumbStrokeColor: Colors.blue, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + startThumbIcon: const Icon( + Icons.arrow_back_ios, color: Colors.blue, size: 20.0), + endThumbIcon: const Icon( + Icons.arrow_forward_ios, color: Colors.blue, size: 20.0), + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -334,45 +382,49 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(5.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - startThumbIcon: Icon( - Icons.keyboard_arrow_down_outlined, - color: Colors.blue, - size: 20.0), - endThumbIcon: Icon( - Icons.keyboard_arrow_up_outlined, - color: Colors.blue, - size: 20.0), - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(5.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + thumbColor: Colors.white, + thumbRadius: 15, + thumbStrokeWidth: 2, + thumbStrokeColor: Colors.blue, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + startThumbIcon: const Icon( + Icons.keyboard_arrow_down_outlined, color: Colors.blue, size: 20.0), + endThumbIcon: const Icon( + Icons.keyboard_arrow_up_outlined, color: Colors.blue, size: 20.0), + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -382,43 +434,49 @@ Widget build(BuildContext context) { ## Thumb overlay size -You can change the size of the thumb overlay in the range slider using the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlayRadius.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the size of the thumb overlay in the range slider using the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayRadius.html) property. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlayRadius: 22, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlayRadius: 22, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -431,34 +489,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlayRadius: 22, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlayRadius: 22, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -468,43 +534,49 @@ Widget build(BuildContext context) { ## Thumb overlay color -You can change the color of the thumb overlay in the range slider using the [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlayColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the color of the thumb overlay in the range slider using the [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayColor.html) property. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlayColor: Colors.red[50], - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlayColor: Colors.red[50], + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -517,34 +589,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlayColor: Colors.red[50], - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlayColor: Colors.red[50], + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -556,41 +636,47 @@ Widget build(BuildContext context) { You can change the overlap stroke color of the thumb in the range slider using the [`overlappingThumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingThumbStrokeColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlappingThumbStrokeColor: Colors.red, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlappingThumbStrokeColor: Colors.red, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -603,34 +689,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlappingThumbStrokeColor: Colors.red, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlappingThumbStrokeColor: Colors.red, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/ticks.md b/Flutter/range-slider/ticks.md index f550cf08f..fd602243d 100644 --- a/Flutter/range-slider/ticks.md +++ b/Flutter/range-slider/ticks.md @@ -2,18 +2,18 @@ layout: post title: Tick in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the Tick feature in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Ticks in Flutter Range Slider (SfRangeSlider) -This section helps to learn about how to add major and minor ticks in the range slider. +This section explains how to add major and minor ticks in the range slider. ## Show major ticks -You can enable the major ticks on the track. It is a shape which is used to represent the major interval points of the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showTicks.html) property is `false`. +You can enable the major ticks on the track. It is a shape which is used to mark the major interval points on the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/showTicks.html) property is `false`. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the range slider will render the major ticks at 0.0, 2.0, 4.0 and so on. @@ -22,29 +22,36 @@ For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -57,29 +64,36 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -93,37 +107,44 @@ N> Refer the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_slid It is used to represent the number of smaller ticks between two major ticks. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/interval.html) is 2.0, the range slider will render the major ticks at 0.0, 2.0, 4.0 and so on. If [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTicksPerInterval.html) is 1, then smaller ticks will be rendered on 1.0 and 3.0 and so on. -I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTicksPerInterval.html) property is null and it must be greater than 0. +I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTicksPerInterval.html) property is `null`. When `null`, no minor ticks are rendered. To render minor ticks, set this property to a value greater than `0`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -136,30 +157,37 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - minorTicksPerInterval: 1, - showLabels: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + minorTicksPerInterval: 1, + showLabels: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -173,49 +201,57 @@ N> ## Major ticks color -You can change the active and inactive major ticks color of the range slider using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/inactiveTickColor.html) properties respectively. +You can change the active and inactive major ticks color of the range slider using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTickColor.html) properties respectively. -The active side of the range slider is between start and end thumbs. +The active side of the range slider is between the start and end thumbs. -The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. +The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the remaining code examples in this section that use `SfRangeSliderThemeData`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - interval: 1, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTickColor: Colors.red, + inactiveTickColor: Colors.red[100], + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + interval: 1, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -228,34 +264,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - interval: 1, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTickColor: Colors.red, + inactiveTickColor: Colors.red[100], + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + interval: 1, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -265,50 +309,56 @@ Widget build(BuildContext context) { ## Minor ticks color -You can change the active and inactive minor ticks color of the range slider using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/inactiveMinorTickColor.html) properties respectively. +You can change the active and inactive minor ticks color of the range slider using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveMinorTickColor.html) properties respectively. -The active side of the range slider is between start and end thumbs. +The active side of the range slider is between the start and end thumbs. -The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. +The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeMinorTickColor: Colors.red, + inactiveMinorTickColor: Colors.red[200], + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -321,35 +371,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeMinorTickColor: Colors.red, + inactiveMinorTickColor: Colors.red[200], + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -357,48 +415,54 @@ Widget build(BuildContext context) { ![Minor ticks color](images/tick/vertical-slider-minor-ticks.png) -## Ticks size +## Tick size -You can change the major and minor ticks size of the range slider using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/minorTickSize.html) properties respectively. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the major and minor ticks size of the range slider using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) properties respectively. ### Horizontal -The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`. +The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tickSize: Size(3.0, 12.0), - minorTickSize: Size(3.0, 8.0), - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tickSize: const Size(3.0, 12.0), + minorTickSize: const Size(3.0, 8.0), + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -408,40 +472,48 @@ Widget build(BuildContext context) { ### Vertical -The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tickSize.html) property is `Size(8.0, 1.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/minorTickSize.html) property is `Size(5.0, 1.0)`. +The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickSize.html) property is `Size(8.0, 1.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/minorTickSize.html) property is `Size(5.0, 1.0)`. {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tickSize: Size(12.0, 3.0), - minorTickSize: Size(8.0, 3.0), - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tickSize: const Size(12.0, 3.0), + minorTickSize: const Size(8.0, 3.0), + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -451,43 +523,49 @@ Widget build(BuildContext context) { ## Ticks offset -You can adjust the space between track and ticks of the range slider using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tickOffset.html) property in the [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tickOffset.html) property is `null`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can adjust the space between the track and ticks of the range slider using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property in the [`SfRangeSliderThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tickOffset.html) property is `null`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tickOffset: Offset(0.0, 10.0), - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tickOffset: const Offset(0.0, 10.0), + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -500,34 +578,42 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tickOffset: Offset(10.0, 0.0), - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tickOffset: const Offset(10.0, 0.0), + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 2, + minorTicksPerInterval: 1, + showTicks: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/tooltip.md b/Flutter/range-slider/tooltip.md index 5525ea08b..aa87b6530 100644 --- a/Flutter/range-slider/tooltip.md +++ b/Flutter/range-slider/tooltip.md @@ -9,11 +9,11 @@ documentation: ug # Flutter Range Slider Tooltip (SfRangeSlider) -This section helps to learn about how to add tooltip in the range slider. +This section explains how to add tooltips to the range slider. ## Enable tooltips -You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html). +You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html) property. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html). I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the range slider thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html) behavior. @@ -22,30 +22,37 @@ I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documenta {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -58,30 +65,37 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 10.0, - interval: 2, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 6.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 10.0, + interval: 2, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -104,31 +118,38 @@ N> The paddle tooltip shape is not applicable for vertical orientation of the ra {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: 0.0, - max: 100.0, - interval: 20, - showTicks: true, - showLabels: true, - enableTooltip: true, - tooltipShape: SfPaddleTooltipShape(), - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: 0.0, + max: 100.0, + interval: 20, + showTicks: true, + showLabels: true, + enableTooltip: true, + tooltipShape: const SfPaddleTooltipShape(), + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -145,31 +166,38 @@ You can show tooltip in left or right positions using the [`tooltipPosition`](ht {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: 0.0, - max: 100.0, - interval: 20, - showTicks: true, - showLabels: true, - enableTooltip: true, - tooltipPosition: SliderTooltipPosition.right, - values: _values, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(40.0, 60.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: 0.0, + max: 100.0, + interval: 20, + showTicks: true, + showLabels: true, + enableTooltip: true, + tooltipPosition: SliderTooltipPosition.right, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -191,35 +219,45 @@ You can format or change the whole tooltip label text using the [`tooltipTextFor {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider( - min: DateTime(2010, 01, 01, 9, 00, 00), - max: DateTime(2010, 01, 01, 21, 05, 00), - values: _values, - interval: 3, - showTicks: true, - showLabels: true, - enableTooltip: true, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = SfRangeValues( + DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider( + min: DateTime(2010, 01, 01, 9, 00, 00), + max: DateTime(2010, 01, 01, 21, 05, 00), + values: _values, + interval: 3, + showTicks: true, + showLabels: true, + enableTooltip: true, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + tooltipTextFormatterCallback: + (dynamic actualValue, String formattedText) { + return DateFormat('h:mm a').format(actualValue); + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -232,35 +270,45 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00)); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSlider.vertical( - min: DateTime(2010, 01, 01, 9, 00, 00), - max: DateTime(2010, 01, 01, 21, 05, 00), - values: _values, - interval: 3, - showTicks: true, - showLabels: true, - enableTooltip: true, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = SfRangeValues( + DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00)); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSlider.vertical( + min: DateTime(2010, 01, 01, 9, 00, 00), + max: DateTime(2010, 01, 01, 21, 05, 00), + values: _values, + interval: 3, + showTicks: true, + showLabels: true, + enableTooltip: true, + dateFormat: DateFormat('h:mm'), + dateIntervalType: DateIntervalType.hours, + tooltipTextFormatterCallback: + (dynamic actualValue, String formattedText) { + return DateFormat('h:mm a').format(actualValue); + }, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + )))); + } } {% endhighlight %} @@ -272,42 +320,50 @@ Widget build(BuildContext context) { You can change the background color of the tooltip in the range slider using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the remaining code examples in this section that use `SfRangeSliderThemeData`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tooltipBackgroundColor: Colors.red[300], + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -320,35 +376,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tooltipBackgroundColor: Colors.red[300], + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -360,42 +424,49 @@ Widget build(BuildContext context) { You can change the appearance of the tooltip text in the range slider using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tooltipTextStyle: const TextStyle( + color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -408,35 +479,44 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + tooltipTextStyle: const TextStyle( + color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -448,42 +528,48 @@ Widget build(BuildContext context) { You can change the overlap stroke color of the tooltip in the range slider using the [`overlappingTooltipStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingTooltipStrokeColor.html) property. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). - ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlappingTooltipStrokeColor: Colors.white, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlappingTooltipStrokeColor: Colors.white, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -496,35 +582,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - overlappingTooltipStrokeColor: Colors.white, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - interval: 1, - showTicks: true, - showLabels: true, - enableTooltip: true, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 8.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + overlappingTooltipStrokeColor: Colors.white, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + interval: 1, + showTicks: true, + showLabels: true, + enableTooltip: true, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} diff --git a/Flutter/range-slider/track.md b/Flutter/range-slider/track.md index 49313f449..c66fc887a 100644 --- a/Flutter/range-slider/track.md +++ b/Flutter/range-slider/track.md @@ -2,58 +2,66 @@ layout: post title: Track in Flutter Range Slider widget | Syncfusion description: Learn here all about adding the Track feature in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more. -platform: Flutter +platform: flutter control: SfRangeSlider documentation: ug --- # Track in Flutter Range Slider (SfRangeSlider) -This section helps to learn about how to customize the track in the range slider. +This section explains how to customize the track in the range slider. ## Track color -You can change the active and inactive track color of the range slider using the [`activeTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/activeTrackColor.html) and [`inactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/inactiveTrackColor.html) properties respectively. +You can change the active and inactive track color of the range slider using the [`activeTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackColor.html) and [`inactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackColor.html) properties respectively. -The active side of the range slider is between start and end thumbs. +The active side of the range slider is between the start and end thumbs. -The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. +The inactive side of the range slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value and the start thumb, and the end thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value. -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. +For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/max.html) value and the start thumb, and the end thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/min.html) value. -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). This applies to all the code examples in this section. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackColor: Colors.red, + inactiveTrackColor: Colors.red[100], + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -66,32 +74,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackColor: Colors.red, + inactiveTrackColor: Colors.red[100], + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -101,41 +117,47 @@ Widget build(BuildContext context) { ## Track height -You can change the track height of the range slider using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/inactiveTrackHeight.html) properties. The default value of the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/inactiveTrackHeight.html) properties are `6.0` and `4.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the track height of the range slider using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackHeight.html) properties. The default values of the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveTrackHeight.html) properties are `6.0` and `4.0`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 8, + inactiveTrackHeight: 8, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -148,32 +170,40 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 8, + inactiveTrackHeight: 8, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -183,42 +213,48 @@ Widget build(BuildContext context) { ## Track corner radius -You can change the corner of the track to be round in the range slider using the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/trackCornerRadius.html) property. The default value of the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/trackCornerRadius.html) property is `1.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html). +You can change the corner of the track to be round in the range slider using the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/trackCornerRadius.html) property. The default value of the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/trackCornerRadius.html) property is `1.0`. ### Horizontal {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfRangeSlider( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + trackCornerRadius: 5, + ), + child: SfRangeSlider( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %} @@ -231,33 +267,41 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSliderTheme( - data: SfRangeSliderThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfRangeSlider.vertical( - min: 2.0, - max: 10.0, - values: _values, - onChanged: (SfRangeValues newValues){ - setState(() { - _values = newValues; - }); - }, - ), - ) - ) - ) - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; +import 'package:syncfusion_flutter_sliders/sliders.dart'; + +class HomePage extends StatefulWidget { + @override + _HomePageState createState() => _HomePageState(); +} + +class _HomePageState extends State { + SfRangeValues _values = const SfRangeValues(4.0, 7.0); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSliderTheme( + data: SfRangeSliderThemeData( + activeTrackHeight: 10, + inactiveTrackHeight: 10, + trackCornerRadius: 5, + ), + child: SfRangeSlider.vertical( + min: 2.0, + max: 10.0, + values: _values, + onChanged: (SfRangeValues newValues) { + setState(() { + _values = newValues; + }); + }, + ), + )))); + } } {% endhighlight %}