Search results

Accessibility

The Slider is characterized with complete ARIA Accessibility support that helps to access by on-screen readers and other assistive technology devices. This component is designed with the reference of guidelines document given in the WAI ARAI Accessibility Practices.

The Slider component 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.

Keyboard interaction

The Keyboard interaction of the Slider component 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.
Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {

  public ticks01 = { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true };
  public tooltip01 = { placement: 'Before', isVisible: true, showOn: 'Always' };

  public ticks02 = { placement: 'After', largeStep: 1 };
  public tooltip02 = { placement: 'Before', isVisible: true };

  public value = 30;
  public step = 10;
  public type = 'MinRange';
  public showButtons = true

  renderingTicksHandler (args: SliderTickEventArgs) {
    // Weekdays Array
    let daysArr: string [] = ['Sunday','Monday','Tuesday','Wednesday','Thrusday','Friday','Saturday'];
    // Customizing each ticks text into weeksdays
    args.text = daysArr[parseFloat(args.value)];
  }

  tooltipChangeHandler(args: SliderTooltipEventArgs) {
    // Customizing tooltip to display the Day (in numeric) of the week
    args.text =  'Day ' + (Number(args.value) + 1).toString();
  }

  render() {
    return (
      <div id='container'>
        <div className='wrap'>
            <div className='label'>Slider without formatted values</div>
            <SliderComponent id='slider' step={this.step} value={this.value} tooltip={this.tooltip01} ticks={this.ticks01} type={this.type}
            showButtons={true} />
        </div>
        <div className='wrap'>
            <div className='label'>Slider with formatted values</div>
            <SliderComponent id='slider1' min={0} max={6} step={1} value={2} tooltip={this.tooltip02} ticks={this.ticks02}
            ref={(slider) => { this.defaultObj = slider }} tooltipChange={this.tooltipChangeHandler.bind(this)}
            renderingTicks={this.renderingTicksHandler.bind(this)} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>
.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}