diff --git a/Flutter/range-selector/enabled-and-disabled-state.md b/Flutter/range-selector/enabled-and-disabled-state.md index af290b6c..74d5981e 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 00000000..0c13bd79 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 5046af6b..2611d1dc 100644 --- a/Flutter/range-selector/labels-and-divider.md +++ b/Flutter/range-selector/labels-and-divider.md @@ -452,6 +452,80 @@ 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 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 %} + +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 +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 a64d79e2..7f8e80c4 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 1f6b91a0..7db7cdf6 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 2fbd5fa0..4563666f 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 a63bdba8..fedcb449 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 b1c8a648..6fe249fc 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 c391b10c..ad16d25d 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 00000000..61704bf6 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 00000000..3c9e3f70 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 3047c38c..ef38193f 100644 --- a/Flutter/range-slider/labels-and-divider.md +++ b/Flutter/range-slider/labels-and-divider.md @@ -481,6 +481,86 @@ 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 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 + +{% 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 +569,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 +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 b598c9a7..98df12fc 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 b09a30cf..e131eee4 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 094e5266..2925fd35 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 40b559c0..8079a1a0 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 00000000..10de4e7d 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 00000000..6d9fd344 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 b43e2e54..bde88c1b 100644 --- a/Flutter/slider/labels-and-divider.md +++ b/Flutter/slider/labels-and-divider.md @@ -480,6 +480,86 @@ 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 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 + +{% 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 +568,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 +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 7e6957c9..9c0dbee4 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 225846d8..57e429d4 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 ec1861e3..89df17d0 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.