FLUT-964629 - [Feature] Updated code content and images for sliders

Flutter/range-selector/accessibility.md

@@ -9,6 +9,12 @@ documentation: ug
 
 # Accessibility in Flutter Range Selector (SfRangeSelector)
 
+## Keyboard support
+
+This feature allows you to focus on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it.
+
+N> In [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time.
+
 ## Screen reader
 
 The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) can be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/semanticFormatterCallback.html) property.

Flutter/range-selector/labels-and-divider.md

@@ -459,6 +459,9 @@ You can format or change the whole numeric or date label text using the [`labelF
 * **actualValue** – either `DateTime` or `double` based on given [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html).
 * **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.
+
 {% tabs %}
 {% highlight Dart %}
 
@@ -612,6 +615,92 @@ class Data {
 
 ![Labels color support](images/label-and-divider/selector-labels-color.png)
 
+## 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.
+
+{% tabs %}
+{% highlight Dart %}
+
+  final double _min = 2.0;
+  final double _max = 10.0;
+  SfRangeValues _values = const SfRangeValues(4.0, 8.0);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfRangeSelector(
+          min: _min,
+          max: _max,
+          interval: 1,
+          showLabels: true,
+          showTicks: true,
+          initialValues: _values,
+          onChanged: (dynamic value) {
+            setState(() {
+              _values = value;
+            });
+          },
+          onLabelCreated: (
+            dynamic actualValue,
+            String text,
+            TextStyle labelTextStyle,
+          ) {
+            final int value = actualValue.toInt();
+            final int start = _values.start.toInt();
+            final int end = _values.end.toInt();
+            return RangeSelectorLabel(
+              text: text,
+              textStyle:
+                  (value == start || value == end)
+                      ? const TextStyle(
+                        color: Colors.blue,
+                        fontSize: 14,
+                      )
+                      : TextStyle(
+                        color: Colors.red[200],
+                        fontSize: 10,
+                      ),
+            );
+          },
+          child: SizedBox(
+            height: 130,
+            child: SfCartesianChart(
+              margin: EdgeInsets.zero,
+              primaryXAxis: NumericAxis(
+                minimum: _min,
+                maximum: _max,
+                isVisible: false,
+              ),
+              primaryYAxis: const NumericAxis(isVisible: false),
+              plotAreaBorderWidth: 0,
+              series: <SplineAreaSeries<Data, double>>[
+                SplineAreaSeries<Data, double>(
+                  color: const 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 double x;
+  final double y;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Individual label style support](images/label-and-divider/selector-individual-label-color.png)
+
 ## Label offset
 
 You can adjust the space between ticks and labels of the range selector using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property.

Flutter/range-slider/accessibility.md

@@ -9,6 +9,12 @@ documentation: ug
 
 # Accessibility in Flutter Range Slider (SfRangeSlider)
 
+## Keyboard support
+
+This feature allows you to focus on the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it.
+
+N> In [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time.
+
 ## Screen reader
 
 The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) can be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/semanticFormatterCallback.html) property.

Flutter/range-slider/labels-and-divider.md

@@ -488,6 +488,9 @@ You can format or change the whole numeric or date label text using the [`labelF
 * actualValue – either `DateTime` or `double` based on given [`values`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/values.html).
 * 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.
+
 ### Horizontal
 
 {% tabs %}
@@ -656,6 +659,120 @@ Widget build(BuildContext context) {
 
 ![Labels style support](images/label-and-divider/vertical-slider-labels-color.png)
 
+## 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.
+
+## Horizontal
+
+{% tabs %}
+{% highlight Dart %}
+
+  SfRangeValues _values = const SfRangeValues(4.0, 8.0);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfRangeSlider(
+          min: 2.0,
+          max: 10.0,
+          values: _values,
+          interval: 1,
+          showLabels: true,
+          showTicks: true,
+          onChanged: (SfRangeValues newValues) {
+            setState(() {
+              _values = newValues;
+            });
+          },
+          onLabelCreated: (
+            dynamic actualValue,
+            String text,
+            TextStyle labelTextStyle,
+          ) {
+            final int value = actualValue.toInt();
+            final int start = _values.start.toInt();
+            final int end = _values.end.toInt();
+            return RangeSliderLabel(
+              text: text,
+              textStyle:
+                  (value == start || value == end)
+                      ? const TextStyle(
+                        color: Colors.blue,
+                        fontSize: 14,
+                      )
+                      : TextStyle(
+                        color: Colors.red[200],
+                        fontSize: 10,
+                      ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Individual label style support](images/label-and-divider/slider-individual-label-color.png)
+
+## Vertical
+
+{% tabs %}
+{% highlight Dart %}
+
+  SfRangeValues _values = const SfRangeValues(4.0, 8.0);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfRangeSlider.vertical(
+          min: 2.0,
+          max: 10.0,
+          values: _values,
+          interval: 1,
+          showLabels: true,
+          showTicks: true,
+          onChanged: (SfRangeValues newValues) {
+            setState(() {
+              _values = newValues;
+            });
+          },
+          onLabelCreated: (
+            dynamic actualValue,
+            String text,
+            TextStyle labelTextStyle,
+          ) {
+            final int value = actualValue.toInt();
+            final int start = _values.start.toInt();
+            final int end = _values.end.toInt();
+            return RangeSliderLabel(
+              text: text,
+              textStyle:
+                  (value == start || value == end)
+                      ? const TextStyle(
+                        color: Colors.blue,
+                        fontSize: 14,
+                      )
+                      : TextStyle(
+                        color: Colors.red[200],
+                        fontSize: 10,
+                      ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Individual label style support](images/label-and-divider/vertical-slider-individual-label-color.png)
+
 ## Label offset
 
 You can adjust the space between ticks and labels of the range slider using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property.

Flutter/slider/accessibility.md

@@ -9,6 +9,10 @@ documentation: ug
 
 # Accessibility in Flutter Slider (SfSlider)
 
+## Keyboard support
+
+This feature allows you to focus on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. The left and down arrow keys can be used to decrease the thumb value, while the right and up arrow keys can be used to increase it.
+
 ## Screen reader
 
 The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) can be accessed by screen readers. By default, it will read the current value. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/semanticFormatterCallback.html) property.

Flutter/slider/labels-and-divider.md

@@ -487,6 +487,9 @@ You can format or change the whole numeric or date label text using the [`labelF
 * actualValue – either `DateTime` or `double` based on given [`value`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/value.html).
 * 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.
+
 ### Horizontal
 
 {% tabs %}
@@ -653,6 +656,113 @@ Widget build(BuildContext context) {
 
 ![Labels style support](images/label-and-divider/vertical-slider-labels-color.png)
 
+## 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.
+
+### Horizontal
+
+{% tabs %}
+{% highlight Dart %}
+
+  double _value = 6.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfSlider(
+          min: 2.0,
+          max: 10.0,
+          value: _value,
+          interval: 1,
+          showLabels: true,
+          showTicks: true,
+          onChanged: (dynamic value) {
+            setState(() {
+              _value = value;
+            });
+          },
+          onLabelCreated: (
+            dynamic actualValue,
+            String text,
+            TextStyle labelTextStyle,
+          ) {
+            return SliderLabel(
+              text: text,
+              textStyle:
+                  actualValue == _value.toInt()
+                      ? const TextStyle(
+                        color: Colors.blue,
+                        fontSize: 14,
+                      )
+                      : TextStyle(
+                        color: Colors.red[200],
+                        fontSize: 10,
+                      ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Individual label style support](images/label-and-divider/slider-individual-label-color.png)
+
+### Vertical
+
+{% tabs %}
+{% highlight Dart %}
+
+  double _value = 6.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SfSlider.vertical(
+          min: 2.0,
+          max: 10.0,
+          value: _value,
+          interval: 1,
+          showLabels: true,
+          showTicks: true,
+          onChanged: (dynamic value) {
+            setState(() {
+              _value = value;
+            });
+          },
+          onLabelCreated: (
+            dynamic actualValue,
+            String text,
+            TextStyle labelTextStyle,
+          ) {
+            return SliderLabel(
+              text: text,
+              textStyle:
+                  actualValue == _value.toInt()
+                      ? const TextStyle(
+                        color: Colors.blue,
+                        fontSize: 14,
+                      )
+                      : TextStyle(
+                        color: Colors.red[200],
+                        fontSize: 10,
+                      ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Individual label style support](images/label-and-divider/vertical-slider-individual-label-color.png)
 
 ## Label offset