Skip to content

983838: Updated the UG content and example changes in the Range Selector. #6811

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

Merged
merged 4 commits into from
Oct 8, 2025
Merged

983838: Updated the UG content and example changes in the Range Selector. #6811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe381fc
983838: Updated the UG content and example changes in the Range Selec…
mohammednowfel4989 Oct 6, 2025
90f6873
Merge branch 'development' into 983838-RangeSelectorUG
Gowrimathi Oct 8, 2025
16477de
982808: Resolved the font matter error in the PR.
mohammednowfel4989 Oct 8, 2025
28ad205
Merge branch '983838-RangeSelectorUG' of https://github.com/syncfusio…
mohammednowfel4989 Oct 8, 2025
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
33 changes: 17 additions & 16 deletions blazor/range-selector/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Accessibility in Blazor Range Selector Component | Syncfusion
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Range Selector component and more.
description: Check out and learn about accessibility, keyboard navigation, and compliance in the Syncfusion Blazor Range Selector component.
platform: Blazor
control: Range Selector
documentation: ug
---

# Accessibility in Blazor Range Selector Component

The Blazor Range Selector component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The Blazor Range Selector component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).

The accessibility compliance for the Blazor Range navigator component is outlined below.
The table below outlines accessibility compliance for the Blazor Range Selector component.

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand All @@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Range navigator component is outline
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |

<style>
Expand All @@ -30,39 +30,40 @@ The accessibility compliance for the Blazor Range navigator component is outline
margin: 0.5em 0;
}
</style>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>


## WAI-ARIA attributes
## WAI-ARIA Attributes

The Blazor Range Selector component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Range Selector component:
The component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns for accessibility. The following ARIA attributes are used:

* img (role)
* region (role)
* aria-label (attribute)
* aria-hidden (attribute)

## Keyboard interaction
## Keyboard Interaction

The Blazor Range Selector component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Range Selector component.
The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users relying on assistive technologies or keyboard navigation. Supported keyboard shortcuts:

| Windows | Mac | Description |
| --- | --- | --- |
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Range Selector element. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the Range Selector element. |
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Range Selector. |
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Range Selector element. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the Range Selector element. |
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Range Selector. |
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Range Selector. |

## Ensuring accessibility
## Ensuring Accessibility

The Blazor Range Selector component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.

The accessibility compliance of the Blazor Range Selector component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window to evaluate the accessibility of the Blazor Range Selector component with accessibility tools.
Evaluate accessibility in the Blazor Range Selector component by opening the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window and using accessibility tools.

## See also
## See Also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
104 changes: 55 additions & 49 deletions blazor/range-selector/custom.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Customization in Blazor Range Selector Component | Syncfusion
description: Checkout and learn here all about customization in Syncfusion Blazor Range Selector component and more.
description: Check out and learn here all about customization in Syncfusion Blazor Range Selector component and more.
platform: Blazor
control: Range Selector
documentation: ug
Expand All @@ -11,7 +11,7 @@ documentation: ug

## Navigator Appearance

The Range Selector can be customized by using the [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). The [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) property is used to specify the color for the selected region, whereas the [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) property is used to specify the color for the unselected region.
Customize the Range Selector using [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). Use [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) to set the color for the selected region and [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) for the unselected region.

```cshtml

Expand All @@ -26,21 +26,23 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings](
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}

public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 },
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 }
};

public int[] Value = new int[] { 45, 78 };
}

Expand All @@ -50,7 +52,7 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings](

## Thumb

The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html) allows to customize the border, fill color, size, and type of thumb using the [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type) properties. Thumbs can be of two shapes: **Circle** and **Rectangle**.
Customize the thumb's border, fill color, size, and type using [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html), [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type). Thumbs can be **Circle** or **Rectangle**.

```cshtml

Expand All @@ -69,22 +71,21 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}

public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 },
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 }
};

public int[] Value = new int[] { 45, 78 };
Expand All @@ -96,7 +97,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi

## Border

Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html), the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) of the Range Selector border can be customized.
Customize the Range Selector border using [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html). Set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) properties.

```cshtml

Expand All @@ -111,21 +112,23 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}

public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 },
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 }
};

public int[] Value = new int[] { 45, 78 };
}

Expand All @@ -135,7 +138,7 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio

## Snapping

The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property toggles the placement of the slider exactly to the left or right at the nearest interval.
Enable the [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property to snap the slider to the nearest interval.

```cshtml

Expand All @@ -149,30 +152,31 @@ The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}

public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 },
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 }
};

public int[] Value = new int[] { 45, 78 };
}

```

## Animation

Animation for the Range Selector is enabled by default. The speed of the animation can be controlled using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default value of the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property is **500** milliseconds.
Animation is enabled by default. Control the speed using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default is **500** milliseconds.

```cshtml

Expand All @@ -186,27 +190,29 @@ Animation for the Range Selector is enabled by default. The speed of the animati
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}

public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 },
new StockDetails { Date = 12, Close = 28 },
new StockDetails { Date = 34, Close = 44 },
new StockDetails { Date = 45, Close = 48 },
new StockDetails { Date = 56, Close = 50 },
new StockDetails { Date = 67, Close = 66 },
new StockDetails { Date = 78, Close = 78 },
new StockDetails { Date = 89, Close = 84 }
};

public int[] Value = new int[] { 45, 78 };
}

```

## See Also

* [Grid and Tick Lines](./grid-tick/)
* [Labels](./labels/)
* [Grid and Tick Lines](./grid-tick)
* [Labels](./labels)
Loading