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 000000000..e786d4166 Binary files /dev/null and b/Flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png differ diff --git a/Flutter/range-selector/labels-and-divider.md b/Flutter/range-selector/labels-and-divider.md index 5046af6b1..d0e13ea08 100644 --- a/Flutter/range-selector/labels-and-divider.md +++ b/Flutter/range-selector/labels-and-divider.md @@ -452,6 +452,82 @@ class Data { ![Label placement support](images/label-and-divider/selector_label_placement.png) +## Edge label placement + +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property determines how the edge (first and last) labels are positioned on the range selector. This property allows the edge labels 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 %} + +final DateTime _min = DateTime(2002, 01, 01); +final DateTime _max = DateTime(2010, 01, 01); +SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); + +final List 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 +536,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 +693,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 +859,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 +931,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 +1010,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 +1093,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 000000000..d35e2d827 Binary files /dev/null and b/Flutter/range-slider/images/label-and-divider/edge-label-placement.png differ 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 000000000..611f08b08 Binary files /dev/null and b/Flutter/range-slider/images/label-and-divider/vertical-edge-label-placement.png differ diff --git a/Flutter/range-slider/labels-and-divider.md b/Flutter/range-slider/labels-and-divider.md index 3047c38cb..580551679 100644 --- a/Flutter/range-slider/labels-and-divider.md +++ b/Flutter/range-slider/labels-and-divider.md @@ -481,6 +481,88 @@ Widget build(BuildContext context) { ![Label placement support](images/label-and-divider/vertical-label-placement.png) +## Edge label placement + +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/edgeLabelPlacement.html) property determines how the edge (first and last) labels are positioned on the range slider. This property allows the edge labels 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 + +{% 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; + }); + }, + ), + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Edge Label placement support](images/label-and-divider/edge-label-placement.png) + +### Vertical + +{% 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; + }); + }, + ), + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Edge Label placement support](images/label-and-divider/vertical-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/SfRangeSlider/labelFormatterCallback.html). Its arguments are, @@ -489,7 +571,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/SfRangeSlider/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/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/SfRangeSlider/onLabelCreated.html) callback to customize both the text and text style of the label. ### Horizontal @@ -661,7 +743,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 +949,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 +1035,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 +1125,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 +1225,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 000000000..10de4e7d1 Binary files /dev/null and b/Flutter/slider/images/label-and-divider/edge-label-placement.png differ 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 000000000..31e66f271 Binary files /dev/null and b/Flutter/slider/images/label-and-divider/vertical-edge-label-placement.png differ diff --git a/Flutter/slider/labels-and-divider.md b/Flutter/slider/labels-and-divider.md index b43e2e54a..a1d283abb 100644 --- a/Flutter/slider/labels-and-divider.md +++ b/Flutter/slider/labels-and-divider.md @@ -480,6 +480,88 @@ Widget build(BuildContext context) { ![Label placement support](images/label-and-divider/vertical-label-placement.png) +## Edge label placement + +The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/edgeLabelPlacement.html) property determines how the edge (first and last) labels are positioned on the slider. This property allows the edge labels 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 + +{% 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, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Edge Label placement support](images\label-and-divider\edge-label-placement.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, + showTicks: true, + edgeLabelPlacement: EdgeLabelPlacement.inside, + dateFormat: DateFormat.y(), + dateIntervalType: DateIntervalType.years, + onChanged: (dynamic newValue) { + setState(() { + _value = newValue; + }); + }, + ), + ) + ) + ); +} + +{% endhighlight %} +{% endtabs %} + +![Edge Label placement support](images\label-and-divider\vertical-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/SfSlider/labelFormatterCallback.html). Its arguments are, @@ -488,7 +570,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/SfSlider/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/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/SfSlider/onLabelCreated.html) callback to customize both the text and text style of the label. ### Horizontal @@ -658,7 +740,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 +940,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 +1026,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 +1117,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 +1214,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.