From f859f4ef38142749bb13b410c8af74f9a3fb46ff Mon Sep 17 00:00:00 2001 From: BPraveenBalu Date: Mon, 7 Jul 2025 15:56:31 +0530 Subject: [PATCH 1/2] FLUT-965284-[others]: Improved sliders UG content. --- .../enabled-and-disabled-state.md | 2 +- .../selector-edge-label-placement.png | Bin 0 -> 9285 bytes Flutter/range-selector/labels-and-divider.md | 88 +- Flutter/range-selector/range-controller.md | 2 +- Flutter/range-selector/shapes.md | 8 +- Flutter/range-selector/tooltip.md | 4 +- Flutter/range-slider/basic-features.md | 4 +- Flutter/range-slider/drag-mode.md | 6 +- Flutter/range-slider/getting-started.md | 2 +- .../edge-label-placement.png | Bin 0 -> 9873 bytes .../vertical-edge-label-placement.png | Bin 0 -> 8208 bytes Flutter/range-slider/labels-and-divider.md | 94 +- Flutter/range-slider/shapes.md | 8 +- Flutter/range-slider/tooltip.md | 4 +- Flutter/slider/basic-features.md | 966 +++++++++--------- Flutter/slider/getting-started.md | 2 +- .../edge-label-placement.png | Bin 0 -> 8626 bytes .../vertical-edge-label-placement.png | Bin 0 -> 8820 bytes Flutter/slider/labels-and-divider.md | 94 +- Flutter/slider/shapes.md | 8 +- Flutter/slider/ticks.md | 2 +- Flutter/slider/tooltip.md | 4 +- 22 files changed, 766 insertions(+), 532 deletions(-) create mode 100644 Flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png create mode 100644 Flutter/range-slider/images/label-and-divider/edge-label-placement.png create mode 100644 Flutter/range-slider/images/label-and-divider/vertical-edge-label-placement.png create mode 100644 Flutter/slider/images/label-and-divider/edge-label-placement.png create mode 100644 Flutter/slider/images/label-and-divider/vertical-edge-label-placement.png diff --git a/Flutter/range-selector/enabled-and-disabled-state.md b/Flutter/range-selector/enabled-and-disabled-state.md index af290b6ca..74d5981e7 100644 --- a/Flutter/range-selector/enabled-and-disabled-state.md +++ b/Flutter/range-selector/enabled-and-disabled-state.md @@ -86,7 +86,7 @@ You can change, * 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. * The color of the active and inactive minor ticks in disabled state using the [`disabledActiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveMinorTickColor.html) and [`disabledInactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveMinorTickColor.html) properties. -* The color of the active and inactive dividers in disabled state using the `disabledActiveDividerColor` and `disabledInactiveDividerColor` properties. +* The color of the active and inactive dividers in disabled state using the [`disabledActiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveDividerColor.html) and [`disabledInactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveDividerColor.html) properties. * The color of the thumb in disabled state using the [`disabledThumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledThumbColor.html) property. N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). diff --git a/Flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png b/Flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png new file mode 100644 index 0000000000000000000000000000000000000000..0c13bd790be905af1006df5e0deca3903f52bcbb GIT binary patch literal 9285 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 chartData = [ + Data(x: DateTime(2002, 01, 01), y: 2.2), + Data(x: DateTime(2003, 01, 01), y: 3.4), + Data(x: DateTime(2004, 01, 01), y: 2.8), + Data(x: DateTime(2005, 01, 01), y: 1.6), + Data(x: DateTime(2006, 01, 01), y: 2.3), + Data(x: DateTime(2007, 01, 01), y: 2.5), + Data(x: DateTime(2008, 01, 01), y: 2.9), + Data(x: DateTime(2009, 01, 01), y: 3.8), + Data(x: DateTime(2010, 01, 01), y: 3.7), +]; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRangeSelector( + min: _min, + max: _max, + showLabels: true, + showTicks: true, + interval: 1, + dateFormat: DateFormat.y(), + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateIntervalType: DateIntervalType.years, + initialValues: _values, + child: Container( + height: 130, + child: SfCartesianChart( + margin: const EdgeInsets.all(0), + primaryXAxis: DateTimeAxis( + minimum: _min, + maximum: _max, + isVisible: false,), + primaryYAxis: NumericAxis(isVisible: false), + plotAreaBorderWidth: 0, + series: >[ + SplineAreaSeries( + color: Color.fromARGB(255, 126, 184, 253), + dataSource: chartData, + xValueMapper: (Data sales, int index) => sales.x, + yValueMapper: (Data sales, int index) => sales.y) + ], + ), + ), + ), + ) + ) + ); +} + +class Data { + Data({required this.x, required this.y}); + final DateTime x; + final double y; +} + +{% endhighlight %} +{% endtabs %} + +![Edge Label placement support](images/label-and-divider/selector-edge-label-placement.png) + ## Customize label text You can format or change the whole numeric or date label text using the [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/labelFormatterCallback.html). Its arguments are, @@ -460,7 +534,7 @@ You can format or change the whole numeric or date label text using the [`labelF * **formattedText** – If the actual value is `double`, it is formatted by [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). >**NOTE** -* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use `onLabelCreated` callback to customize both the text and text style of the label. +* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onLabelCreated.html) callback to customize both the text and text style of the label. {% tabs %} {% highlight Dart %} @@ -617,7 +691,7 @@ class Data { ## Individual label style -You can now customize the appearance of each label on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) individually by using the `onLabelCreated` callback. This callback allows you to have complete control over the text and text style for each label. +You can now customize the appearance of each label on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) individually by using the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onLabelCreated.html) callback. This callback allows you to have complete control over the text and text style for each label. {% tabs %} {% highlight Dart %} @@ -783,7 +857,7 @@ class Data { ## Show dividers -The `showDividers` property is used to render the dividers on the track. The default value of `showDividers` 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/SfRangeSelector/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/SfRangeSelector/showDividers.html) property is `false`. It is a shape which is used to represent the major interval points of the track. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the dividers at 0.0, 2.0, 4.0 and so on. @@ -855,7 +929,7 @@ class Data { ## Divider radius -You can change the active and inactive divider radius of the range selector using the `activeDividerRadius` and the `inactiveDividerRadius` properties respectively. +You can change the active and inactive divider radius of the range selector 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 [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). @@ -934,9 +1008,9 @@ class Data { ## Divider stroke width and stroke color -You can change the active and inactive divider stroke width of the range selector using the `activeDividerStrokeWidth` and the `inactiveDividerStrokeWidth` properties respectively. +You can change the active and inactive divider stroke width of the range selector using the [`activeDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeWidth.html) and the [`inactiveDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeWidth.html) properties respectively. -Also, you can change the active and inactive divider stroke color of the range selector using the `activeDividerStrokeColor` and the `inactiveDividerStrokeColor` properties respectively. +Also, you can change the active and inactive divider stroke color of the range selector 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 [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). @@ -1017,7 +1091,7 @@ class Data { ## Divider color -You can change the active and inactive divider color of the range selector using the `activeDividerColor` and `inactiveDividerColor` properties respectively. +You can change the active and inactive divider color of the range selector 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 [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). diff --git a/Flutter/range-selector/range-controller.md b/Flutter/range-selector/range-controller.md index a64d79e2f..7f8e80c40 100644 --- a/Flutter/range-selector/range-controller.md +++ b/Flutter/range-selector/range-controller.md @@ -216,7 +216,7 @@ class Data { ## Zooming with SfChart -We have provided built-in support for updating the visible range of the chart based on the selected range in range selector. To update the visible range, you must set the `primaryYAxis.rangeController` property in the `SfCartesianChart`. +We have provided built-in support for updating the visible range of the chart based on the selected range in range selector. To update the visible range, you must set the `primaryYAxis.rangeController` property in the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). {% tabs %} {% highlight Dart %} diff --git a/Flutter/range-selector/shapes.md b/Flutter/range-selector/shapes.md index 1f6b91a04..7db7cdf6a 100644 --- a/Flutter/range-selector/shapes.md +++ b/Flutter/range-selector/shapes.md @@ -13,7 +13,7 @@ This section helps to learn about how to customize the shapes of the range selec ## Track shape -You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/trackShape.html) property in the `SfRangeSelector`. +You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/trackShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the track shape. @@ -116,7 +116,7 @@ class _TrackShape extends SfTrackShape { ## Thumb shape -You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/thumbShape.html) property in the `SfRangeSelector`. +You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/thumbShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the thumb shape. @@ -220,7 +220,7 @@ class _SfThumbShape extends SfThumbShape { ## Divider shape -You can change the size and shape of the divider using the `dividerShape` property in the `SfRangeSelector`. +You can change the size and shape of the divider using the [`dividerShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dividerShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the divider shape. @@ -318,7 +318,7 @@ class _DividerShape extends SfDividerShape { ## Major and minor ticks shapes -You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTickShape.html) properties in the `SfRangeSelector`. +You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTickShape.html) properties in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the ticks shape. diff --git a/Flutter/range-selector/tooltip.md b/Flutter/range-selector/tooltip.md index 2fbd5fa0a..4563666f1 100644 --- a/Flutter/range-selector/tooltip.md +++ b/Flutter/range-selector/tooltip.md @@ -15,7 +15,7 @@ This section helps to learn about how to add tooltip in the range selector. You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/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/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). -I> By setting the value of `shouldAlwaysShowTooltip` to true, you can always show a tooltip without having to interact with the range selector thumb. The default value is `false` and it works independent of the `enableTooltip` behavior. +I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the range selector thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html) behavior. {% tabs %} {% highlight Dart %} @@ -90,7 +90,7 @@ N> ## Tooltip shape -You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property is `SfRectangularTooltipShape`. +You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property is [`SfRectangularTooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRectangularTooltipShape-class.html). {% tabs %} {% highlight Dart %} diff --git a/Flutter/range-slider/basic-features.md b/Flutter/range-slider/basic-features.md index a63bdba82..fedcb449e 100644 --- a/Flutter/range-slider/basic-features.md +++ b/Flutter/range-slider/basic-features.md @@ -178,7 +178,7 @@ Widget build(BuildContext context) { **onChangeStart** -The `onChangeStart` 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 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 %} @@ -209,7 +209,7 @@ Widget build(BuildContext context) { **onChangeEnd** -The `onChangeEnd` 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 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. {% tabs %} {% highlight Dart %} diff --git a/Flutter/range-slider/drag-mode.md b/Flutter/range-slider/drag-mode.md index b1c8a648a..6fe249fca 100644 --- a/Flutter/range-slider/drag-mode.md +++ b/Flutter/range-slider/drag-mode.md @@ -11,7 +11,7 @@ documentation: ug ## On thumb -When `dragMode` 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` property is `SliderDragMode.onThumb`. +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`. {% tabs %} {% highlight Dart %} @@ -52,7 +52,7 @@ Widget build(BuildContext context) { ## Between thumbs -When `dragMode` 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 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. N> It is applicable for both horizontal and vertical range slider. @@ -95,7 +95,7 @@ Widget build(BuildContext context) { ## Both thumbs -When `dragMode` is set to `SliderDragMode.both`, individual thumb can be moved by dragging it, and also both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. +When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to `SliderDragMode.both`, individual thumb can be moved by dragging it, and also both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. N> It is applicable for both horizontal and vertical range slider. diff --git a/Flutter/range-slider/getting-started.md b/Flutter/range-slider/getting-started.md index c391b10c9..ad16d25d8 100644 --- a/Flutter/range-slider/getting-started.md +++ b/Flutter/range-slider/getting-started.md @@ -468,7 +468,7 @@ Widget build(BuildContext context) { ## Inverse the vertical range slider -You can invert the vertical range slider using the `isInversed` property. The default value of the `isInversed` property is `false`. +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 %} diff --git a/Flutter/range-slider/images/label-and-divider/edge-label-placement.png b/Flutter/range-slider/images/label-and-divider/edge-label-placement.png new file mode 100644 index 0000000000000000000000000000000000000000..61704bf690e9205fcccbef0be3f8dd6eadf3dd7f GIT binary patch literal 9873 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 literal 0 HcmV?d00001 diff --git a/Flutter/range-slider/images/label-and-divider/vertical-edge-label-placement.png b/Flutter/range-slider/images/label-and-divider/vertical-edge-label-placement.png new file mode 100644 index 0000000000000000000000000000000000000000..3c9e3f708e5429280650b4ac490140f0f79ac85a GIT binary patch literal 8208 zcmd5>2T+qymkml)Pz0nXU8+)ofD|c$v;YA?1?e3`2rcxg5PI*@t02-8r8j9tYUst# zK|(Kz(qUir-`Sm=*`4`kc6VlnVM5-=`(C^6+;h$if1;sGapl$(2n0d_Q&G?cp9lzq z;4LXJ_)BHbUIl!xTBvBlArNma2;?;i0yzdvuU8=uHz)+MZVG`&zJ);OoH84bd>oG|+hW1*}*}Lm1U3atP(B2Z# zS?(GSnY1=bgc(Q8X!3BTHlv?v-uJ}|C#%W5aXLvp;p9L~KbEh`fLAr{oMg(jSJayl zMYMY4EFbl4zTZL29ULv!H|;danA{*I=DhU|nkhrjpIq>cH!P)yRX;uOrR|mcf8tAB zrp%jj6*BpKBQDgVeG^g@-hv#pa+b2rOcA!+dwhFDY_lki)WT!?n=(0-vGly0Fc^%6 zme!p9acNtagl!6c$xfVzhkO%3K_X|~lQ2`LxT!%cHah9?&IHvbZn!+_=+nf&2ZZnB zw6x+!if=vz?|oglp`nQsPdYB`HB)gVzW6{EO>TL9^Nd7ZL#$g!Z=@pSJI{T_YfHb6 zAS!Tp7c^?M!4w*X!F4R{#U&-tB(uHi#QnZ;EffYGiogq#T;1J=hlXy<2uMgU)MB?* z-L8E|=R)OHS0~rbdPkD5_{Qa&?-%R z+S@P3D>IvYi()7M#SZR2F9}YG_FJnDa|r8!7&5 z+IDF+;KDD4Q6kWc{!4AGu-7lk?0|ExY_AoDipFip87X5md#v?zo%87;T`Q}waN_#< zEBEc`?vkg)^rEk5eEx2lEwl$q?GHX)URn8dyiqwaIQVrS>!A>N&^xu%#XZl-)&N;- z4Z>o5v;@qcqV?RH*>_j2FzH1~FajHMErvK*gqO3Vqyz$<+GCYeVZOdn<>lq06BADj z4Wp70nwq4jsHonTm%q!;58U5()z;RAk_YwmsjsiEuWoJ@HaBO1R!K=or+UK}v1sV` zbhOF^p>*|juV5>OsAzIHHTUrFu)MM|33Dt7FQ;*3YG^RFj@Fx#pQ0Eg5{8GhYwV}mW0)R-P5)9; zvTxj#J%@<99xdKva+)9VYE9hr&IQ#?Y&mPAsEQ>?9YUA;|z$o%i!=WVx^UQ zd>)qSlrOFh6}(7MR8%BtJ==2Z?(S}@L6CQtVzQ;n^gf4VW-=COWUasdA~zxB-E5rg zz0M2nBBr#mMb*fNNjZiwue3BW`nH(MMtSY8S)ZLxo_ppG5I+k=TS`*G<4sxfPEx~)>{c8+ZA9c*jyRW-u8K#?@GW2kH}ESJ>3 zm4%nHSR-rkH%1n>hh{-<{84J{ur)WnMIOa>u8VbZb=_Uba9sR-bU0S&uP7%+P=iQ} zkC#(bz2e_0oBn5NY)nx{hjwjk4Pc7$$;X}^)!~tmsRp-uKY#uty!7Vf?CRbU+VQ^`S_V!eG z>p_}6Y`gCN6~x<%Mt6RaYmE3LezM(oy>g-#E;iF?ljHa8s$kRW-k@p7z&wR|oZC1u>*I$T%B#)xpoNdl{ zxYLw4_1OmC@xzB1HrZYw*JTc0g9Jt^V5p*_qm%O{)Qny|Md47YthR`u{xyG<dQmJdM`%Izq73Cj~v@u&n2inY^=s$eDpJBrfQJyEceb~=C`tFbGXXw4VjZ-p zAF&ONft4N@Y`*{W>FBTi_ywxeZ})k$Tlb?JfNp?=%HrXV+5gZCKp+jA)!xz3raxVj z&#*4enzGrUb|-z1@6ZjQ@RLKlzB2l0Kb4 zPG03M)_&l)^JdO#O3E5DlVTIr3BkN+Asa1?S`R&l6XAjX4tcOo}fQB2IW6-*B1i|vT#!HfqW z8@Wq*6EV}pFtTF(c2_-Jk3A~6iHeNKGJ*;0X)J{3(2T?SKn@@9s83 z$1qL%9n47mowV>hUMt2=2Qapl(_dnKT`Yuc3c{kg)Jo#Qt(*%ZFOlC;g!x&Fapg`F1_ z3X_0H0c;rX*q@!@)RvZ(aVaSww&|AE)-K!A67qSJ0;!P$0~#7xl8WMt)}!yWVh(Hv zq;AAZhof{OA(xDdo;}a8a50t)IdT*C+A(ct_BmMmKeP3H#EeDe5o`ET`398;J$d>Bpe(r~dxjntSt)X#FMrDqdc=Dmw!78htr&E8gS-F1yZ$^Kx)8QUs)jH4T4${nPzu^3+RlyAF|r@s zZlMDv@1VYl7!?*4-j^A8JU-;U`8$h#n3zz&gKgyK~QD#R~qCS=r!Ck8Az|IB6QDpb7j8cG@BE3HjUR?s9-EzpzmgS_XA`p&yM| z3E289zEN!QtLrNw7{W^wAWd;`piX~T!m?P*{bNwvY4hE_H(XEw;Rkx8tK=QZ-1fH~ zZW3@`7%dwf7&C_pG9>IJTzW}1>FfWE>!p$2LmSez0FjPa@2hPdIml+O-_|Mo2H$|C z<9V`GYwPIfAvM^RS12!zbwHLqHx0XY`w1z55v}iYyBjsF*vt)JAAEG%&;bbExm7zi zfLB$ZKVvN1nFpuu@?or1&fS{I!m8F{Twr@gXlNf50JET)Ef;c{nB4C)Ya8pa;eX+AJ^`A&r@ud zerHaA)0ME&f1jK1%hBaibUgJ7ow>fxDg>8xlac%=Q=r%U+IN7j1*B9+2(hY~TIhQb zj-tZ@CDZLXaV2t=kk#j}CnRyVyk9-Hvf>1S&b;rf(6l=i@mSbT7qYge8xX|DS;)~T zB-!X_ZpMN0#w$C+df++?_YTx=^NS=P5%k2>)zzoK{~$4)scUIf|a(>yK(X076as!)i1%G`@bs*Jev4QjpS;L`oc}$~u!o zDs_THVf#g+Im7_4K|~E|9jrj^19JA(ty?egC-QwPPX->Bv1oq$5h|_qUAIcm(x-h| zJipjv{d0xMz#o9FX=0AdEPnepfR_O9*m<#&tf!|3FGSi%SQz7wXTxfOTKf8`Afn65nRIz4j26ka?!{h{85B* zE&<8^CY+bx939QplA8Kvs&c-&tOUBq=|Cfu)Nz<9G`rQ58WJ%F^ zKcH+Zk;Cz_SGIt^4&!{orbv`O++z7Hh^2;$Dm5ldd=*j>CrQ6qR8^rJ zm`&YS7fsQ5HF9qj5{Y)ZZ)bSFo0m6cZe9|mzHCU+*k~(0*OO|~I5kU&{#4_6nsPNY zZrL+1>Dtx%_cXOd?k96N{(4RD{Yi(jEv0R`yerYA(c0rFUAp{oV2KeD%YmDYrf>Ci9L<$}Jld~}Yz?Pp4(w7WWlHS)2rx76|Eo>&A3z3MpAYB{$(NoZlU+Dk*?O4AJr}qudQ+U7MJ)va-^FdJR=o zc3}Jh4h_P~3wX>bnwqg`=j6av7_KRK|Gpjfo8krTk2fzLU({c<_`c8ITTS5j>3p(4 z0~SWzuNTQ_miq{vxX(cn(y^fCe?0NUE(^&N+35=xCQn>kTy!*Kv1Px*Fd` z#F4VxrLJv;%H@=px=V)gJ}&u(fjC!dSem)9ylk1PJSlr|q^Uk)x!4&lG=!nJYYX;G z(j_Wv^7~(n$lK4rlm_Z!oJzK`ET2#)gk1SAGT;B3L>#25zvC5o$L#9agrfD6=F!d4 z_`#6#ll|C57jLR{IWZ;&R!Y;6A~;?bk+OM$!>;=?ZXg6te8l=ynZ>WuAznZl`M97{lT=$xPL!zRg;qEH1 zB=>v-$UeXk?Wd}OL44r-Uc1U>B|yZBY=Kj&By%`_nM*SpZ#L@HIxqp9J30CN!}HRQ zh>Xom`&sV|eo*R&)2=e>Ail;Z{&l%K@#t_V7OzY5VYfAe-oHvmVDb4a)z~|Hs6ZJQ z@(d{gMm=CCdLeT{0P8=wWsk_ffntt&P0rh~j;(McQn=B5i=C2mw{h<5S}eK)2tT}A z57fx%*-ij%tvClCE?^-6^T0+lZwn;i;Np^W&jOALjF&;iSG+(ey1fQ5?cgD@RszaA z4GofDj{=ht05@J-S^_d@;d}fYAocFsPeSp!M9UDE(;#U<{ZBm$lho5i!jZTEpxIVl z!f!tt_ST#bK+O;4J@%Ahj);hOX=|HTUQSUtf#r@UEiaD-1`;SYI6FI&ve64$lWVJj zLI|aNTwL7iq=YYDMDz^|);2dshbwM2E4!T>?AUDmsP0P_jm*!_Cm<*XDzmOmoUa$u z8%i|4^0~z?)v(AODn5|gOfGjThLt5($j+hy#{1E@E3kyv7m$m_`{W} zS7B;u$bDnPAPfs|3`o+2Hzdqom-gllPC!b>OX<{9G$24P9UQE216kme@fjIvAj^U( z2&1fjW+J!dFpyh7hXI5l#2;Zk(DL|NjG@Pj+mQML;M+g;=jFV4^CmDne(jHFDra;Q zXM0BgVwKal(~>b^>=O-YKk;d4-5@kTO#<(@0V%3bQ18&V^#EVf0<|33^SxL-;0EqA z{k{fPh9_HoRM)dipS+Wl!$1m~nwl^cA2J+U(m?6VT#pu*hV#J4R!_Sh3`^uPOXq?B z9SICuCJ=!9wbSz6-jWc&2sWqd@g+CwflQd3+?yr8AGrzc-%G?Eq^hNGZ9t(G>AU6 zp+<^sX**NOTE** -* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use `onLabelCreated` callback to customize both the text and text style of the label. +* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onLabelCreated.html) callback to customize both the text and text style of the label. ### Horizontal @@ -661,7 +741,7 @@ Widget build(BuildContext context) { ## Individual label style -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` callback. This callback allows you to have complete control over the text and text style for each label. +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 @@ -867,7 +947,7 @@ Widget build(BuildContext context) { ## Show dividers -The `showDividers` property is used to render the dividers on the track. The default value of `showDividers` 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 represent the major interval points of 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. @@ -953,7 +1033,7 @@ Widget build(BuildContext context) { ## Divider radius -You can change the active and inactive divider radius of the range slider using the `activeDividerRadius` and the `inactiveDividerRadius` properties respectively. +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). @@ -1043,9 +1123,9 @@ Widget build(BuildContext context) { ## Divider stroke width and stroke color -You can change the active and inactive divider stroke width of the range slider using the `activeDividerStrokeWidth` and the `inactiveDividerStrokeWidth` properties respectively. +You can change the active and inactive divider stroke width of the range slider using the [`activeDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeWidth.html) and the [`inactiveDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeWidth.html) properties respectively. -Also, you can change the active and inactive divider stroke color of the range slider using the `activeDividerStrokeColor` and the `inactiveDividerStrokeColor` properties respectively. +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). @@ -1143,7 +1223,7 @@ Widget build(BuildContext context) { ## Divider color -You can change the active and inactive divider color of the range slider using the `activeDividerColor` and `inactiveDividerColor` properties respectively. +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). diff --git a/Flutter/range-slider/shapes.md b/Flutter/range-slider/shapes.md index b598c9a7c..98df12fc7 100644 --- a/Flutter/range-slider/shapes.md +++ b/Flutter/range-slider/shapes.md @@ -13,7 +13,7 @@ This section helps to learn about how to customize the shapes of the range slide ## Track shape -You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/trackShape.html) property in the `SfRangeSlider`. +You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/trackShape.html) property in the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the track shape. @@ -82,7 +82,7 @@ class _TrackShape extends SfTrackShape { ## Thumb shape -You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/thumbShape.html) property in the `SfRangeSlider`. +You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/thumbShape.html) property in the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the thumb shape. @@ -149,7 +149,7 @@ class _SfThumbShape extends SfThumbShape { ## Divider shape -You can change the size and shape of the divider using the [`dividerShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dividerShape.html) property in the `SfRangeSlider`. +You can change the size and shape of the divider using the [`dividerShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dividerShape.html) property in the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the divider shape. @@ -211,7 +211,7 @@ class _DividerShape extends SfDividerShape { ## Major and minor ticks shapes -You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTickShape.html) properties in the `SfRangeSlider`. +You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/minorTickShape.html) properties in the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the ticks shape. diff --git a/Flutter/range-slider/tooltip.md b/Flutter/range-slider/tooltip.md index b09a30cf8..e131eee42 100644 --- a/Flutter/range-slider/tooltip.md +++ b/Flutter/range-slider/tooltip.md @@ -15,7 +15,7 @@ This section helps to learn about how to add tooltip in the range slider. 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). -I> By setting the value of `shouldAlwaysShowTooltip` 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` behavior. +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. ### Horizontal @@ -95,7 +95,7 @@ N> ## Tooltip shape -You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property is `SfRectangularTooltipShape`. +You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipShape.html) property is [`SfRectangularTooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRectangularTooltipShape-class.html). N> The paddle tooltip shape is not applicable for vertical orientation of the range sliders. diff --git a/Flutter/slider/basic-features.md b/Flutter/slider/basic-features.md index 094e52664..2925fd353 100644 --- a/Flutter/slider/basic-features.md +++ b/Flutter/slider/basic-features.md @@ -1,484 +1,484 @@ ---- -layout: post -title: Basic features in Flutter Slider widget | Syncfusion -description: Learn here all about adding the Basic feature of Syncfusion Flutter Slider (SfSlider) widget and more. -platform: Flutter -control: SfSlider -documentation: ug ---- - -# Basic features in Flutter Slider (SfSlider) -This section explains about how to add the numeric and date slider. - -## Minimum - -The minimum value that the user can select. The default value of [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) property is 0.0 and it must be less than the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. - -## Maximum - -The maximum value that the user can select. The default value of [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) property is 1.0 and it must be greater than the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) value. - -## Value - -It represents the value currently selected in the slider. The slider's thumb is drawn corresponding to this value. - -For date values, the slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) for date values. - -**Numeric slider** - -You can show numeric values in the slider by setting `double` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) and [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) properties. - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Numeric slider](images/basic-features/numeric-labels.png) - -### Vertical - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Numeric slider](images/basic-features/vertical_numeric_labels.png) - -**Date slider** - -You can show date values in the slider by setting `DateTime` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) and [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) properties. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Date slider](images/basic-features/date-labels.png) - -### Vertical - -{% tabs %} -{% highlight Dart %} - -DateTime _value = DateTime(2002, 01, 01); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: DateTime(2000, 01, 01, 00), - max: DateTime(2004, 12, 31, 24), - value: _value, - interval: 1, - showLabels: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Date slider](images/basic-features/vertical_date_labels.png) - -## Handle onChangeStart, onChanged, and onChangeEnd callbacks - -**onChangeStart** - -The `onChangeStart` callback is called when the user begins to interact with 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 slider thumb. - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChangeStart: (dynamic startValue) { - print('Interaction started'); - }, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -**onChangeEnd** - -The `onChangeEnd` callback is called when the user stops to interact with 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 slider thumb. - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - onChangeEnd: (dynamic endValue) { - print('Interaction ended'); - }, - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -**onChanged** - -The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback is called when the user selects a value through interaction. - -N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with new value. - -N> If it is null, the slider will be disabled. - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Enable slider](images/basic-features/enabled-state.png) - -### Vertical - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Enable slider](images/basic-features/vertical_enabled_state.png) - -## Active color - -It represents the color applied to the active track, thumb, overlay, and inactive dividers. The active side of the slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) value and the thumb. - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Active color support](images/basic-features/active-color.png) - -### Vertical - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Active color support](images/basic-features/vertical_active_color.png) - -## Inactive color - -It represents the color applied to the inactive track and active dividers. - -The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Inactive color support](images/basic-features/inactive-color.png) - -### Horizontal - -{% tabs %} -{% highlight Dart %} - -double _value = 4.0; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfSlider.vertical( - min: 0.0, - max: 10.0, - value: _value, - interval: 2, - activeColor: Colors.red, - inactiveColor: Colors.red.withOpacity(0.2), - showDividers: true, - showTicks: true, - showLabels: true, - onChanged: (dynamic newValue) { - setState(() { - _value = newValue; - }); - }, - ) - ) - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Inactive color support](images/basic-features/vertical_inactive_color.png) - -### For customizing individual items - -* Track - [`Link`](https://help.syncfusion.com/flutter/slider/track) -* Ticks - [`Link`](https://help.syncfusion.com/flutter/slider/ticks) -* Labels and dividers - [`Link`](https://help.syncfusion.com/flutter/slider/labels-and-divider) -* Tooltip - [`Link`](https://help.syncfusion.com/flutter/slider/tooltip) -* Thumb and overlay - [`Link`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay) - -To know more about how to customize both thumb and divider in the Flutter Slider, you can watch this video. - - +--- +layout: post +title: Basic features in Flutter Slider widget | Syncfusion +description: Learn here all about adding the Basic feature of Syncfusion Flutter Slider (SfSlider) widget and more. +platform: Flutter +control: SfSlider +documentation: ug +--- + +# Basic features in Flutter Slider (SfSlider) +This section explains about how to add the numeric and date slider. + +## Minimum + +The minimum value that the user can select. The default value of [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) property is 0.0 and it must be less than the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. + +## Maximum + +The maximum value that the user can select. The default value of [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) property is 1.0 and it must be greater than the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) value. + +## Value + +It represents the value currently selected in the slider. The slider's thumb is drawn corresponding to this value. + +For date values, the slider does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html) for date values. + +**Numeric slider** + +You can show numeric values in the slider by setting `double` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) and [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) properties. + +### Horizontal + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Numeric slider](images/basic-features/numeric-labels.png) + +### Vertical + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Numeric slider](images/basic-features/vertical_numeric_labels.png) + +**Date slider** + +You can show date values in the slider by setting `DateTime` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) and [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html) properties. + +N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date slider using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. + +### Horizontal + +{% tabs %} +{% highlight Dart %} + +DateTime _value = DateTime(2002, 01, 01); + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Date slider](images/basic-features/date-labels.png) + +### Vertical + +{% tabs %} +{% highlight Dart %} + +DateTime _value = DateTime(2002, 01, 01); + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: DateTime(2000, 01, 01, 00), + max: DateTime(2004, 12, 31, 24), + value: _value, + interval: 1, + showLabels: true, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Date slider](images/basic-features/vertical_date_labels.png) + +## Handle onChangeStart, onChanged, and onChangeEnd callbacks + +**onChangeStart** + +The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeStart.html) callback is called when the user begins to interact with 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 slider thumb. + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChangeStart: (dynamic startValue) { + print('Interaction started'); + }, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ); +} + +{% endhighlight %} +{% endtabs %} + +**onChangeEnd** + +The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChangeEnd.html) callback is called when the user stops to interact with 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 slider thumb. + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return Scaffold( + body: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + onChangeEnd: (dynamic endValue) { + print('Interaction ended'); + }, + ), + ); +} + +{% endhighlight %} +{% endtabs %} + +**onChanged** + +The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback is called when the user selects a value through interaction. + +N> The slider passes the new value to the callback but does not change its state until the parent widget rebuilds the slider with new value. + +N> If it is null, the slider will be disabled. + +### Horizontal + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Enable slider](images/basic-features/enabled-state.png) + +### Vertical + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Enable slider](images/basic-features/vertical_enabled_state.png) + +## Active color + +It represents the color applied to the active track, thumb, overlay, and inactive dividers. The active side of the slider is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) value and the thumb. + +### Horizontal + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Active color support](images/basic-features/active-color.png) + +### Vertical + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Active color support](images/basic-features/vertical_active_color.png) + +## Inactive color + +It represents the color applied to the inactive track and active dividers. + +The inactive side of the slider is between the thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) value. + +### Horizontal + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + inactiveColor: Colors.red.withOpacity(0.2), + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Inactive color support](images/basic-features/inactive-color.png) + +### Vertical + +{% tabs %} +{% highlight Dart %} + +double _value = 4.0; + +@override +Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfSlider.vertical( + min: 0.0, + max: 10.0, + value: _value, + interval: 2, + activeColor: Colors.red, + inactiveColor: Colors.red.withOpacity(0.2), + showDividers: true, + showTicks: true, + showLabels: true, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ) + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Inactive color support](images/basic-features/vertical_inactive_color.png) + +### For customizing individual items + +* Track - [`Link`](https://help.syncfusion.com/flutter/slider/track) +* Ticks - [`Link`](https://help.syncfusion.com/flutter/slider/ticks) +* Labels and dividers - [`Link`](https://help.syncfusion.com/flutter/slider/labels-and-divider) +* Tooltip - [`Link`](https://help.syncfusion.com/flutter/slider/tooltip) +* Thumb and overlay - [`Link`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay) + +To know more about how to customize both thumb and divider in the Flutter Slider, you can watch this video. + + \ No newline at end of file diff --git a/Flutter/slider/getting-started.md b/Flutter/slider/getting-started.md index 40b559c0c..8079a1a00 100644 --- a/Flutter/slider/getting-started.md +++ b/Flutter/slider/getting-started.md @@ -452,7 +452,7 @@ Widget build(BuildContext context) { ## Inverse the vertical slider -You can invert the vertical slider using the `isInversed` property. The default value of the `isInversed` property is `false`. +You can invert the vertical slider using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/isInversed.html) property. The default value of the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/isInversed.html) property is `false`. {% tabs %} {% highlight Dart %} diff --git a/Flutter/slider/images/label-and-divider/edge-label-placement.png b/Flutter/slider/images/label-and-divider/edge-label-placement.png new file mode 100644 index 0000000000000000000000000000000000000000..10de4e7d19fd4f9d1cc6ab9ac1aabe0d46df7eb6 GIT binary patch literal 8626 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 literal 0 HcmV?d00001 diff --git a/Flutter/slider/images/label-and-divider/vertical-edge-label-placement.png b/Flutter/slider/images/label-and-divider/vertical-edge-label-placement.png new file mode 100644 index 0000000000000000000000000000000000000000..6d9fd34409d6235517fdcb37926e862d398ca2f9 GIT binary patch literal 8820 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 -* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use `onLabelCreated` callback to customize both the text and text style of the label. +* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onLabelCreated.html) callback to customize both the text and text style of the label. ### Horizontal @@ -658,7 +738,7 @@ Widget build(BuildContext context) { ## Individual label style -You can customize the appearance of each label on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) individually by using the `onLabelCreated` callback. This callback allows you to have complete control over the text and text style for each label. +You can customize the appearance of each label on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) individually by using the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onLabelCreated.html) callback. This callback allows you to have complete control over the text and text style for each label. ### Horizontal @@ -858,7 +938,7 @@ Widget build(BuildContext context) { ## Show dividers -The `showDividers` property is used to render the dividers on the track. The default value of the `showDividers` 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/SfSlider/showDividers.html) property is used to render the dividers on the track. The default value of the [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/showDividers.html) property is `false`. It is a shape which is used to represent the major interval points of the track. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/interval.html) is 2.0, the slider will render the dividers at 0.0, 2.0, 4.0 and so on. @@ -944,7 +1024,7 @@ Widget build(BuildContext context) { ## Divider radius -You can change the active and inactive divider radius of the slider using the `activeDividerRadius` and the `inactiveDividerRadius` properties respectively. +You can change the active and inactive divider radius of the 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). @@ -1035,9 +1115,9 @@ Widget build(BuildContext context) { ## Divider stroke width and stroke color -You can change the active and inactive divider stroke width of the slider using the `activeDividerStrokeWidth` and the `inactiveDividerStrokeWidth` properties respectively. +You can change the active and inactive divider stroke width of the slider using the [`activeDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeWidth.html) and the [`inactiveDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeWidth.html) properties respectively. -Also, you can change the active and inactive divider stroke color of the slider using the `activeDividerStrokeColor` and the `inactiveDividerStrokeColor` properties respectively. +Also, you can change the active and inactive divider stroke color of the 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). @@ -1132,7 +1212,7 @@ Widget build(BuildContext context) { ## Divider color -You can change the active and inactive divider color of the slider using the `activeDividerColor` and `inactiveDividerColor` properties respectively. +You can change the active and inactive divider color of the 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 [`SfSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderTheme-class.html). diff --git a/Flutter/slider/shapes.md b/Flutter/slider/shapes.md index 7e6957c90..9c0dbee4c 100644 --- a/Flutter/slider/shapes.md +++ b/Flutter/slider/shapes.md @@ -13,7 +13,7 @@ This section helps to learn about how to customize the shapes of the slider elem ## Track shape -You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/trackShape.html) property in the `SfSlider`. +You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/trackShape.html) property in the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the track shape. @@ -85,7 +85,7 @@ class _SfTrackShape extends SfTrackShape { ## Thumb shape -You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/thumbShape.html) property in the `SfSlider`. +You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/thumbShape.html) property in the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the thumb shape. @@ -155,7 +155,7 @@ class _SfThumbShape extends SfThumbShape { ## Divider shape -You can change the size and shape of the divider using the `dividerShape` property in the `SfSlider`. +You can change the size and shape of the divider using the [`dividerShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dividerShape.html) property in the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the divider shape. @@ -226,7 +226,7 @@ class _DividerShape extends SfDividerShape { ## Major and minor ticks shapes -You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/minorTickShape.html) properties in the `SfSlider`. +You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/minorTickShape.html) properties in the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html). * getPreferredSize() - Returns the size based on the values passed to it. * paint() - Used to change the ticks shape. diff --git a/Flutter/slider/ticks.md b/Flutter/slider/ticks.md index 225846d88..57e429d43 100644 --- a/Flutter/slider/ticks.md +++ b/Flutter/slider/ticks.md @@ -402,7 +402,7 @@ Widget build(BuildContext context) { ### Vertical -You can change the major and minor ticks size of the 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. 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(5.0, 1.0)`. +You can change the major and minor ticks size of the 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. 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 %} diff --git a/Flutter/slider/tooltip.md b/Flutter/slider/tooltip.md index ec1861e39..89df17d0c 100644 --- a/Flutter/slider/tooltip.md +++ b/Flutter/slider/tooltip.md @@ -15,7 +15,7 @@ This section helps to learn about how to add tooltip in the slider. You can enable tooltip for the thumb using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html). It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html). -I> By setting the value of `shouldAlwaysShowTooltip` to true, you can always show a tooltip without having to interact with the slider thumb. The default value is `false` and it works independent of the `enableTooltip` behavior. +I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the slider thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html) behavior. ### Horizontal @@ -96,7 +96,7 @@ N> ## Tooltip shape -You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipShape.html) property is `SfRectangularTooltipShape`. +You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipShape.html) property is [`SfRectangularTooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRectangularTooltipShape-class.html). N> The paddle tooltip shape is not applicable for vertical orientation of the sliders. From dc712f62a5f3c5bbe02c741d5a96e30ad5386a39 Mon Sep 17 00:00:00 2001 From: BPraveenBalu Date: Tue, 8 Jul 2025 18:07:40 +0530 Subject: [PATCH 2/2] FLUT-965284-[others]: Addressed review comments. --- Flutter/range-selector/labels-and-divider.md | 4 ++-- Flutter/range-slider/labels-and-divider.md | 4 ++-- Flutter/slider/labels-and-divider.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Flutter/range-selector/labels-and-divider.md b/Flutter/range-selector/labels-and-divider.md index 66a80c76b..2611d1dcf 100644 --- a/Flutter/range-selector/labels-and-divider.md +++ b/Flutter/range-selector/labels-and-divider.md @@ -452,9 +452,9 @@ class Data { ![Label placement support](images/label-and-divider/selector_label_placement.png) -## Edge Label placement +## Edge label placement -The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property is used to place the edge labels either inside the major ticks or on the major ticks. The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property determines the positioning of edge labels, allowing them to be placed either inside the major ticks or directly on the major ticks. The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. {% tabs %} {% highlight Dart %} diff --git a/Flutter/range-slider/labels-and-divider.md b/Flutter/range-slider/labels-and-divider.md index 69df7f806..ef38193f2 100644 --- a/Flutter/range-slider/labels-and-divider.md +++ b/Flutter/range-slider/labels-and-divider.md @@ -481,9 +481,9 @@ Widget build(BuildContext context) { ![Label placement support](images/label-and-divider/vertical-label-placement.png) -## Edge Label placement +## Edge label placement -The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/edgeLabelPlacement.html) property is used to place the edge labels either inside the major ticks or on the major ticks. The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/edgeLabelPlacement.html) property determines the positioning of edge labels, allowing them to be placed either inside the major ticks or directly on the major ticks. The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. ### Horizontal diff --git a/Flutter/slider/labels-and-divider.md b/Flutter/slider/labels-and-divider.md index 15af7add6..bde88c1be 100644 --- a/Flutter/slider/labels-and-divider.md +++ b/Flutter/slider/labels-and-divider.md @@ -480,9 +480,9 @@ Widget build(BuildContext context) { ![Label placement support](images/label-and-divider/vertical-label-placement.png) -## Edge Label placement +## Edge label placement -The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/edgeLabelPlacement.html) property is used to place the edge labels either inside the major ticks or on the major ticks. The default value of the [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/edgeLabelPlacement.html) property determines the positioning of edge labels, allowing them to be placed either inside the major ticks or directly on the major ticks. The default value of the [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. ### Horizontal