Skip to content

FLUT-1020062: Enhanced Flutter Slider UG documentation #1545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Harsha-SF4223 wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

FLUT-1020062: Enhanced Flutter Slider UG documentation #1545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 78 additions & 58 deletions Flutter/slider/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
layout: post
title: Accessibility in Flutter Slider widget | Syncfusion
title: Accessibility in Flutter Slider widget | Syncfusion
description: Learn here all about the accessibility support in Syncfusion Flutter Slider (SfSlider) widget and how to customize the text.
platform: Flutter
platform: flutter
control: SfSlider
documentation: ug
---
Expand All @@ -11,7 +11,7 @@ documentation: ug

## 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.
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. The value changes by the [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepSize.html) (for numeric values) or [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/stepDuration.html) (for date values) per key press.

## Screen reader

Expand All @@ -26,32 +26,42 @@ For iOS, you can adjust the value of the thumb by moving the focus to it and the
{% tabs %}
{% highlight Dart %}

double _value = 40.0;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: 0.0,
max: 100.0,
value: _value,
interval: 20,
showTicks: true,
showLabels: true,
semanticFormatterCallback: (dynamic value){
return 'The selected value is $value';
},
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
),
);
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class AccessibilityPage extends StatefulWidget {
@override
_AccessibilityPageState createState() => _AccessibilityPageState();
}

class _AccessibilityPageState extends State<AccessibilityPage> {
double _value = 40.0;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider(
min: 0.0,
max: 100.0,
value: _value,
interval: 20,
showTicks: true,
showLabels: true,
semanticFormatterCallback: (double value){
return 'The selected value is $value';
},
onChanged: (double newValue) {
setState(() {
_value = newValue;
});
},
),
)
),
);
}
}

{% endhighlight %}
Expand All @@ -62,32 +72,42 @@ Widget build(BuildContext context) {
{% tabs %}
{% highlight Dart %}

double _value = 40.0;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: _value,
interval: 20,
showTicks: true,
showLabels: true,
semanticFormatterCallback: (dynamic value){
return 'The selected value is $value';
},
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
)
),
);
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class VerticalAccessibilityPage extends StatefulWidget {
@override
_VerticalAccessibilityPageState createState() => _VerticalAccessibilityPageState();
}

class _VerticalAccessibilityPageState extends State<VerticalAccessibilityPage> {
double _value = 40.0;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: _value,
interval: 20,
showTicks: true,
showLabels: true,
semanticFormatterCallback: (double value){
return 'The selected value is $value';
},
onChanged: (double newValue) {
setState(() {
_value = newValue;
});
},
),
)
),
);
}
}

{% endhighlight %}
Expand All @@ -101,7 +121,7 @@ You can customize the color of the [`SfSlider`](https://pub.dev/documentation/sy
* [`Major ticks`](https://help.syncfusion.com/flutter/slider/ticks#major-ticks-color)
* [`Minor ticks`](https://help.syncfusion.com/flutter/slider/ticks#minor-ticks-color)
* [`Labels`](https://help.syncfusion.com/flutter/slider/labels-and-divider#show-labels)
* [`Dividers`](https://help.syncfusion.com/flutter/slider/labels-and-divider#show-dividers)
* [`Dividers`](https://help.syncfusion.com/flutter/slider/labels-and-divider#divider-color)
* [`Thumb`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-color)
* [`Thumb overlay`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-overlay-color)

Expand All @@ -112,6 +132,6 @@ The font size of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutt
* [`Label style`](https://help.syncfusion.com/flutter/slider/labels-and-divider#label-style)
* [`Tooltip label style`](https://help.syncfusion.com/flutter/slider/tooltip#tooltip-label-style)

## Easier touch targets
## Touch targets

The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) has touch target as 48 * 48 as per the standard for all the elements.
The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) has a touch target of 48 × 48 pixels as per the standard for all the elements.
Loading