The Slider is characterized with complete ARIA Accessibility support that helps to access by on-screen readers and other assistive technology devices. This control is designed with the reference of guidelines document given in the WAI ARAI Accessibility Practices.
The Slider control uses the Slider role and the following ARIA properties for its element based on the state.
| Property | Functionalities |
|---|---|
| aria-valuenow | It Indicates the current value of the slider. |
| aria-valuetext | 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. |
The Keyboard interaction of the Slider control is designed based on the WAI-ARIA Practices described for Slider. Users can use the following shortcut keys to interact with the Slider.
| Keyboard shortcuts | Actions |
| Right Arrow | Up Arrow | Increase the Slider value. |
| Left Arrow | Down Arrow | Decrease the Slider value. |
| Home | 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). |
| End | 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). |
| Page Up | Increases the Slider by `largeStep` value. |
| Page Down | Decreases the Slider by `largeStep` value. |
// Initialize Slider component
var minRangeObj = new ej.inputs.Slider({
ticks: { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true },
tooltip: { placement: 'Before', isVisible: true, showOn: 'Always' },
value: 30,
step: 10,
type: 'MinRange',
showButtons: true
});
// Render initialized Slider
minRangeObj.appendTo('#slider');
var weekdaysObj = new ej.inputs.Slider({
min: 0, max: 6, step: 1, value: 2,
// Assigning ticks data
ticks: {
placement: 'After',
largeStep: 1,
},
renderingTicks: function (args) {
// Weekdays Array
var daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'];
// Customizing each ticks text into weeksdays
args.value = daysArr[parseFloat(args.value)];
},
// Assigning tooltip data
tooltip: {
placement: 'Before',
isVisible: true,
},
tooltipChange: function (args) {
// Customizing tooltip to display the Day (in numeric) of the week
args.tooltipText = 'Day ' + (Number(args.tooltipText) + 1).toString();
}
});
// Render initialized Slider
weekdaysObj.appendTo('#slider1');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Slider Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<div class="label">Slider without formatted values</div>
<div id="slider">
</div>
</div>
<div class="wrap">
<div class="label">Slider with formatted values</div>
<div id="slider1">
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}