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

[Hariram-SF4428]

Feature description

Updated code snippets, content and images for individual label customization feature in slider, range slider and range selector widget in the UG documentation.
Updated content for keyboard accessibility feature in slider, range slider and range selector widgets of UG documentation.

Analysis and design

Task link 1 - [FLUT-964629]
Task link 2 - [FLUT-964639]

• Implemented the individual label style customization feature in the Volume 02, 2025 release. With this we can change the specific label style based on our needs. So, need to explain regarding this feature.

• So, we can add the content and demos for all the three widgets including horizontal and vertical above the mentioned links.

• Implemented the keyboard accessibility support in the Volume 02, 2025 release. With this we can focus the Slider widget by tapping on the TAB key in keyboard and change the values of the Slider widget using the keyboard arrow keys our needs. So, need to explain regarding this feature. Already we have explained other accessibility supports in the accessibility page.

• So, we can add the content and demos for all the three widgets including horizontal and vertical above the mentioned links.

Solution description

• Updated all relevant code examples to align with the latest widget APIs and best practices.
• Revised accompanying text content for clarity, consistency, and accuracy.
• Replaced outdated images with new visuals demonstrating current widget UI and interactions.
• Ensured all examples render correctly and are consistent across platforms.
• Reviewed for accessibility improvements and visual clarity in the documentation layout.

Output screenshots

Slider:

Vertical Slider:

Range Slider:

Vertical Range Slider:

Range Selector:

Areas affected and ensured

List out the areas affected by your code changes.

Test cases

Provide the unit testing written file details to understand the use cases considered in this implementation.
If there is no TDD (if its not possible to follow), provide the UI automation script location and the Excel file that contains the use cases considered in this implementation.
Provide the test cases Excel file alone, if the feature cannot be automated in any case.

Test bed sample location

Provide the test bed sample location where code reviewers can review the new feature's behaviors. It can be from NPMCI, staging site, local server, and more.

Does it have any behavior changes?

Mention if there are any existing behavior changes due to this code changes.

Additional checklist

• Did you run the UI automation against your feature? Yes | No Your Explanation
• Has there been a change in the API name or the introduction of a new API? Have you received approval for the API review task? Yes | No Your Explanation
• Did you record this case in the widget test, unit test, or UI test? Yes | No Your Explanation
• Did you add the comment for your new code (Method / Class / API / Interface / Event) that explains the need and code details? Yes | No Your Explanation
• If you use a third-party package, did you get approval to use it? If no, please get approval before merging. Yes | No Your Explanation
• Have you tested this feature on Android, Windows, Web, iOS, macOS, and Linux (It is mandatory to test your changes on one mobile, desktop, and web platform)? Yes | No Your Explanation
• Did you test the memory leak with your feature? Yes | No Your Explanation
• Did you ensure the performance? Check this link to know more about performance optimization and how to automate? Yes | No Your Explanation
• Did you ensure the responsiveness of your feature on the Web? Yes | No Your Explanation
• Did you ensure both touch and mouse interactions for your feature on the Web? Yes | No Your Explanation
• Does your feature supports localization? Yes | No Your Explanation
• Did you ensure your feature for light and dark theme support? Yes | No Your Explanation
• Did you add a feature sample in the testbed sample? Yes | No Your Explanation
• Did you ensure RTL, accessibility, and globalization? Yes | No Your Explanation
• Did you ensure that there are no linter warnings in the code change? Yes | No Your Explanation
• Did you add a change log for the feature implementation? Yes | No Your Explanation
• Did you documented the feature in knowledge base and user guide documentation? Yes | No Your Explanation
• Did you follow a Flutter style and Effective dart guidelines while implement feature? Yes | No Your Explanation
• Did you ensure the cases mentioned in this link? Yes | No Your Explanation

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.

[sfHariHaraSudhan]

Approved

[SyncfusionBuild]

Your pull request has been created. Syncfusion support team will validate this commit and publish your changes accordingly.