Skip to content

Commit a0fec70

Browse files
author
LavanyaA
authored
Merge pull request #1251 from Hariram-SF4428/FLUT-964629-UG-docs-slider-feature-update
FLUT-964629 - [Feature] Updated code content and images for sliders
2 parents fe71cb5 + 7b1b62d commit a0fec70

File tree

11 files changed

+332
-0
lines changed

11 files changed

+332
-0
lines changed

‎Flutter/range-selector/accessibility.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ documentation: ug
99

1010
# Accessibility in Flutter Range Selector (SfRangeSelector)
1111

12+
## Keyboard support
13+
14+
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.
15+
16+
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.
17+
1218
## Screen reader
1319

1420
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/images/label-and-divider/selector-individual-label-color.png‎

5.73 KB
Loading

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -459,6 +459,9 @@ You can format or change the whole numeric or date label text using the [`labelF
459459
* **actualValue** – either `DateTime` or `double` based on given [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html).
460460
* **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).
461461

462+
>**NOTE**
463+
* [`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.
464+
462465
{% tabs %}
463466
{% highlight Dart %}
464467

@@ -612,6 +615,92 @@ class Data {
612615

613616
![Labels color support](images/label-and-divider/selector-labels-color.png)
614617

618+
## Individual label style
619+
620+
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.
621+
622+
{% tabs %}
623+
{% highlight Dart %}
624+
625+
final double _min = 2.0;
626+
final double _max = 10.0;
627+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
628+
629+
@override
630+
Widget build(BuildContext context) {
631+
return Scaffold(
632+
body: Center(
633+
child: SfRangeSelector(
634+
min: _min,
635+
max: _max,
636+
interval: 1,
637+
showLabels: true,
638+
showTicks: true,
639+
initialValues: _values,
640+
onChanged: (dynamic value) {
641+
setState(() {
642+
_values = value;
643+
});
644+
},
645+
onLabelCreated: (
646+
dynamic actualValue,
647+
String text,
648+
TextStyle labelTextStyle,
649+
) {
650+
final int value = actualValue.toInt();
651+
final int start = _values.start.toInt();
652+
final int end = _values.end.toInt();
653+
return RangeSelectorLabel(
654+
text: text,
655+
textStyle:
656+
(value == start || value == end)
657+
? const TextStyle(
658+
color: Colors.blue,
659+
fontSize: 14,
660+
)
661+
: TextStyle(
662+
color: Colors.red[200],
663+
fontSize: 10,
664+
),
665+
);
666+
},
667+
child: SizedBox(
668+
height: 130,
669+
child: SfCartesianChart(
670+
margin: EdgeInsets.zero,
671+
primaryXAxis: NumericAxis(
672+
minimum: _min,
673+
maximum: _max,
674+
isVisible: false,
675+
),
676+
primaryYAxis: const NumericAxis(isVisible: false),
677+
plotAreaBorderWidth: 0,
678+
series: <SplineAreaSeries<Data, double>>[
679+
SplineAreaSeries<Data, double>(
680+
color: const Color.fromARGB(255, 126, 184, 253),
681+
dataSource: chartData,
682+
xValueMapper: (Data sales, int index) => sales.x,
683+
yValueMapper: (Data sales, int index) => sales.y,
684+
),
685+
],
686+
),
687+
),
688+
),
689+
),
690+
);
691+
}
692+
693+
class Data {
694+
Data({required this.x, required this.y});
695+
final double x;
696+
final double y;
697+
}
698+
699+
{% endhighlight %}
700+
{% endtabs %}
701+
702+
![Individual label style support](images/label-and-divider/selector-individual-label-color.png)
703+
615704
## Label offset
616705

617706
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‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ documentation: ug
99

1010
# Accessibility in Flutter Range Slider (SfRangeSlider)
1111

12+
## Keyboard support
13+
14+
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.
15+
16+
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.
17+
1218
## Screen reader
1319

1420
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/images/label-and-divider/slider-individual-label-color.png‎

2.91 KB
Loading

‎Flutter/range-slider/images/label-and-divider/vertical-slider-individual-label-color.png‎

3.76 KB
Loading

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,9 @@ You can format or change the whole numeric or date label text using the [`labelF
488488
* actualValue – either `DateTime` or `double` based on given [`values`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/values.html).
489489
* 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).
490490

491+
>**NOTE**
492+
* [`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.
493+
491494
### Horizontal
492495

493496
{% tabs %}
@@ -656,6 +659,120 @@ Widget build(BuildContext context) {
656659

657660
![Labels style support](images/label-and-divider/vertical-slider-labels-color.png)
658661

662+
## Individual label style
663+
664+
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.
665+
666+
## Horizontal
667+
668+
{% tabs %}
669+
{% highlight Dart %}
670+
671+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
672+
673+
@override
674+
Widget build(BuildContext context) {
675+
return Scaffold(
676+
body: Center(
677+
child: SfRangeSlider(
678+
min: 2.0,
679+
max: 10.0,
680+
values: _values,
681+
interval: 1,
682+
showLabels: true,
683+
showTicks: true,
684+
onChanged: (SfRangeValues newValues) {
685+
setState(() {
686+
_values = newValues;
687+
});
688+
},
689+
onLabelCreated: (
690+
dynamic actualValue,
691+
String text,
692+
TextStyle labelTextStyle,
693+
) {
694+
final int value = actualValue.toInt();
695+
final int start = _values.start.toInt();
696+
final int end = _values.end.toInt();
697+
return RangeSliderLabel(
698+
text: text,
699+
textStyle:
700+
(value == start || value == end)
701+
? const TextStyle(
702+
color: Colors.blue,
703+
fontSize: 14,
704+
)
705+
: TextStyle(
706+
color: Colors.red[200],
707+
fontSize: 10,
708+
),
709+
);
710+
},
711+
),
712+
),
713+
);
714+
}
715+
716+
{% endhighlight %}
717+
{% endtabs %}
718+
719+
![Individual label style support](images/label-and-divider/slider-individual-label-color.png)
720+
721+
## Vertical
722+
723+
{% tabs %}
724+
{% highlight Dart %}
725+
726+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
727+
728+
@override
729+
Widget build(BuildContext context) {
730+
return Scaffold(
731+
body: Center(
732+
child: SfRangeSlider.vertical(
733+
min: 2.0,
734+
max: 10.0,
735+
values: _values,
736+
interval: 1,
737+
showLabels: true,
738+
showTicks: true,
739+
onChanged: (SfRangeValues newValues) {
740+
setState(() {
741+
_values = newValues;
742+
});
743+
},
744+
onLabelCreated: (
745+
dynamic actualValue,
746+
String text,
747+
TextStyle labelTextStyle,
748+
) {
749+
final int value = actualValue.toInt();
750+
final int start = _values.start.toInt();
751+
final int end = _values.end.toInt();
752+
return RangeSliderLabel(
753+
text: text,
754+
textStyle:
755+
(value == start || value == end)
756+
? const TextStyle(
757+
color: Colors.blue,
758+
fontSize: 14,
759+
)
760+
: TextStyle(
761+
color: Colors.red[200],
762+
fontSize: 10,
763+
),
764+
);
765+
},
766+
),
767+
),
768+
);
769+
}
770+
771+
{% endhighlight %}
772+
{% endtabs %}
773+
774+
![Individual label style support](images/label-and-divider/vertical-slider-individual-label-color.png)
775+
659776
## Label offset
660777

661778
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‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ documentation: ug
99

1010
# Accessibility in Flutter Slider (SfSlider)
1111

12+
## Keyboard support
13+
14+
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.
15+
1216
## Screen reader
1317

1418
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/images/label-and-divider/slider-individual-label-color.png‎

2.42 KB
Loading

‎Flutter/slider/images/label-and-divider/vertical-slider-individual-label-color.png‎

3.15 KB
Loading

0 commit comments

Comments
 (0)