Skip to content

Updated UG Documentation for RangeSlider #6901

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 6 commits into from
Oct 15, 2025
Merged

Updated UG Documentation for RangeSlider #6901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c14c6be
983104: Updated the UG Documentation for SpeedDial
Ashwini-SF5049 Oct 13, 2025
aaa44ad
983104: Updated the UG Documentation for Rating
Ashwini-SF5049 Oct 13, 2025
8c94550
983104: Updated the UG Documentation for RangeSlider
Ashwini-SF5049 Oct 13, 2025
b158509
Merge branch 'development' into BLAZ-983104-Rangeslider
Ashwini-SF5049 Oct 13, 2025
c74e172
983104: Updated
Ashwini-SF5049 Oct 13, 2025
46bda43
Update slider-inside-dialog.md
Ashwini-SF5049 Oct 13, 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
46 changes: 23 additions & 23 deletions blazor/range-slider/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ The accessibility compliance for the Blazor Range Slider component is outlined b

| Accessibility Criteria | Compatibility |
| -- | -- |
| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
Expand All @@ -33,45 +33,45 @@ The accessibility compliance for the Blazor Range Slider component is outlined b
}
</style>

<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> - All features of the component meet the requirement.</div>

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

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

## WAI-ARIA attributes

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

| **Attributes** | **Purpose** |
| --- | --- |
| `aria-valuenow` | It indicates the current value of the slider. |
| `aria-valuetext`| It returns the current text of the slider. |
| `aria-valuemin` | It indicates the minimum value of the slider. |
| `aria-valuemax` | It indicates the maximum value of the slider. |
| `aria-orientation` | It indicates the Slider Orientation. |
| `aria-label` | Slider left and right button label text (increment and decrement). |
| `aria-labelledby` | It indicates the name of the Slider. |
| `aria-valuenow` | Indicates the current value of the slider. |
| `aria-valuetext`| Provides a human-readable text alternative for the current value. |
| `aria-valuemin` | Indicates the minimum value of the slider. |
| `aria-valuemax` | Indicates the maximum value of the slider. |
| `aria-orientation` | Indicates the slider orientation. |
| `aria-label` | Defines an accessible name for controls (for example, increment or decrement). |
| `aria-labelledby` | References the element that provides the accessible name for the slider. |

## Keyboard interaction

The Keyboard interaction of the Blazor Range Slider component is designed based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for Slider. Users can use the following shortcut keys to interact with the Slider.
Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for sliders. Use the following shortcut keys to interact with the slider.

| Windows | Mac | Actions |
| --- | --- | --- |
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the Slider value.|
| <kbd>↓</kbd> , <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the Slider value. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves to the start value (for Range Slider when the second thumb is focused and the Home key is pressed, it moves to the first thumb value). |
| <kbd>End</kbd> | <kbd>End</kbd> | Moves to the end value (for Range Slider when the first thumb is focused and the End key is pressed, it moves to the second thumb value). |
| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Increases the Slider by `LargeStep` value. |
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Decreases the Slider by `LargeStep` value. |
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the slider value. |
| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the slider value. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Move to the start value (for range sliders, when the second thumb is focused and Home is pressed, it moves to the first thumb’s value). |
| <kbd>End</kbd> | <kbd>End</kbd> | Move to the end value (for range sliders, when the first thumb is focused and End is pressed, it moves to the second thumb’s value). |
| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Increase by the `LargeStep` value. |
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Decrease by the `LargeStep` value. |

## Ensuring accessibility

The Blazor Range Slider component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
The Blazor Range Slider component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.

The accessibility compliance of the Range Slider component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the accessibility of the Range Slider component with accessibility tools.
The accessibility compliance of the Range Slider component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the Range Slider component with accessibility tools.

## 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)
17 changes: 8 additions & 9 deletions blazor/range-slider/format.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ documentation: ug

# Formatting in Blazor Range Slider Component

The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways of achieving formatting in slider.
The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature is used to customize the units and appearance of slider values. Formatted values are also applied to the ARIA attributes of the slider to ensure accessible output. There are two ways to apply formatting in the slider.

* Use the `Format` API of slider which utilizes our **Internationalization** to format values.

* Customize using the events namely [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange).
* Use the `Format` API of the slider, which leverages the built-in internationalization and .NET standard format strings.
* Customize formatting using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -28,11 +27,11 @@ The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.Sl
}
```

![Formating in Blazor RangeSlider](images/blazor-rangeslider-format.gif)
![Formatting values in the Blazor Range Slider](images/blazor-rangeslider-format.gif)

## Using format API

Slider provides different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers.
Slider provides predefined formatting styles such as Numeric (`N`), Percentage (`P`), Currency (`C`), and custom numeric format strings (for example, `#`). These formats are culture-aware and use the application’s current culture for symbols and separators.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -48,11 +47,11 @@ Slider provides different predefined formatting styles like Numeric (N), Percent

```

![Blazor Range Slider Format API](images/blazor-rangeslider-format-api.gif)
![Blazor Range Slider format API](images/blazor-rangeslider-format-api.gif)

## Using Events

For custom formatting use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). Below is an example where slider values are formatted into weekdays and corresponding tooltip values are formatted as days of the week.
For custom scenarios, use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). The following example formats tick labels as weekday names and tooltips as day numbers.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand Down Expand Up @@ -82,4 +81,4 @@ For custom formatting use event handlers like [`TicksRendering`](https://help.sy

```

![Blazor Range Slider Events](images/blazor-rangeslider-format-using-events.png)
![Blazor Range Slider events](images/blazor-rangeslider-format-using-events.png)
Loading