Author: | Stanko |
---|---|
Views Total: | 1,338 views |
Official Page: | Go to website |
Last Update: | December 11, 2019 |
License: | MIT |
Preview:

Description:
A tiny and easy JavaScript library to create responsive, accessible, customizable, touch-friendly range slider & progress bar components on the web application.
The library dynamically adds WAI-ARIA roles and attributes to the range sliders to make them fully accessible for keyboard users and screen readers.
How to use it:
1. Install & download the package.
# NPM $ npm install aria-progress-range-slider --save
2. Import the aria-progress-range-slider.
import ProgressBar from 'aria-progress-range-slider'; import 'aria-progress-range-slider/dist/style.css';
<!-- OR --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css" rel="stylesheet"> <script type="module"> import ProgressBar from 'https://cdn.jsdelivr.net/npm/aria-progress-range-sl[email protected]/dist/aria-progress-range-slider.mjs'; </script>
3. Create a placeholder for the range slider.
<div id="example"></div>
4. Create a default range slider on the app.
const mySlider = new ProgressBar('#example', { // options here });
5. Config the range slider with the following options.
const mySlider = new ProgressBar('#example', { ariaLabel: 'Seek slider', arrowMoveStep: 1, pageMoveStep: 5, className: 'AriaProgressBar', disabled: false, float: false, // use floating numbers instead of integers getTooltipText: (value:number, options:IProgressBarOptions) => { if (options.float) { return value.toString(); } return Math.round(value).toString(); }, getValueText: (value:number, options:IProgressBarOptions) => { return `${ value } ranging from ${ options.min } to ${ options.max }` }, initialValue: 0, max: 100, min: 0, snap: true, step: 1, });
6. Event handlers.
const mySlider = new ProgressBar('#example', { onChange: (value, options) => {}, onDragEnd: (value, options) => {}, onDragMove: (value: number, options?: IProgressBarOptions) => {}, onDragStart: (value: number, options?: IProgressBarOptions) => {}, });
7. API methods.
// Gets the current value mySlider.getValue(); // Sets value mySlider.setValue(value); // Sets value for the buffer bar mySlider.setBufferValue(value); // Enables the range slider mySlider.enable(); // Disables the range slider mySlider.disable(); // Destroys the range slider mySlider.destroy();