DXB Slider - Customizable Range + Number Input Slider with RTL Support and WCAG AA Accessibility features
DXB Slider is a lightweight, customizable range slider component with a programmatically added number input. It's designed to be easy to implement, accessible, styleable, and supports both LTR and RTL layouts.
- Customizable range slider with a dynamically added, synchronized number input
- Accessible design with ARIA attributes
- Namespaced CSS for easy integration
- Minimal JavaScript footprint
- Support for both LTR (Left-to-Right) and RTL (Right-to-Left) layouts
- Language-specific numeral display (pending broader browser adoption)
- Optimized for mobile devices with appropriate software keyboard support
- New in 2.0.0: Automatic wrapper generation - just add a label and input!
You can install DXB Slider in several ways:
npm install @dxpr/dxb-sliderInclude the CSS and JavaScript files directly from jsDelivr CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dxpr/[email protected]/dxb-slider.min.css">
<script src="https://cdn.jsdelivr.net/npm/@dxpr/[email protected]/dxb-slider.min.js"></script>Or use the latest version (not recommended for production):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dxpr/dxb-slider@latest/dxb-slider.min.css">
<script src="https://cdn.jsdelivr.net/npm/@dxpr/dxb-slider@latest/dxb-slider.min.js"></script>Download the files directly from the GitHub repository.
-
Include the CSS in your
<head>tag:<!-- Using npm --> <link rel="stylesheet" href="node_modules/@dxpr/dxb-slider/dxb-slider.min.css"> <!-- Or using CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dxpr/[email protected]/dxb-slider.min.css">
-
Add the HTML structure for your slider - just a label and input:
<label for="mySlider">Slider Label</label> <input type="range" id="mySlider" data-dxb-slider min="0" max="100" value="50" step="1">
The JavaScript will automatically generate the necessary wrapper elements and number input.
-
Include the JavaScript at the end of your
<body>tag:<!-- Using npm --> <script src="node_modules/@dxpr/dxb-slider/dxb-slider.min.js"></script> <!-- Or using CDN --> <script src="https://cdn.jsdelivr.net/npm/@dxpr/[email protected]/dxb-slider.min.js"></script>
-
The sliders will be automatically initialized for all elements with the
data-dxb-sliderattribute, including those added dynamically after page load. -
The sliders will automatically adjust for mobile devices, displaying the appropriate software keyboard (numeric or decimal) based on the slider's configuration.
To use the slider in RTL mode, add the dir="rtl" attribute to a parent element:
<div dir="rtl" lang="ar">
<label for="mySlider">عنوان المنزلق</label>
<input type="range"
id="mySlider"
data-dxb-slider
min="0" max="100"
value="50"
step="1">
</div>The slider will automatically adjust its layout for RTL, including:
- Reversing the order of the slider and number input
- Adjusting the slider track fill direction
- Properly aligning text and elements for RTL languages
For language-specific numerals, DXB Slider uses CSS font-variant-numeric properties. Currently supported languages include:
- Arabic (
lang="ar") - Persian (
lang="fa") - Bengali (
lang="bn") - Hindi, Marathi, Nepali (
lang="hi",lang="mr",lang="ne")
Note: The language-specific numeral feature is currently fully supported in Firefox. Other browsers may have limited or no support for this feature. As browser adoption increases, this feature will become more widely available without any changes to the DXB Slider code.
You can customize the appearance of the slider by modifying the CSS variables in the :root selector:
:root {
--dxb-slider-width: 270px;
--dxb-slider-height: 5px;
--dxb-slider-thumb-size: 20px;
--dxb-slider-primary-color: #0550e6;
--dxb-slider-secondary-color: #dadfe7;
}
| Feature | DXB Slider | AlRangeSlider | Ion.RangeSlider | Simple Slider | Bootstrap Slider |
|---|---|---|---|---|---|
| File Size | 1 KB | 75 KB | 85 KB | 15 KB | 11 KB |
| Dependency-free | ✅ | ❌ (jQuery) | ❌ (jQuery) | ❌ (jQuery) | ✅ (Optional) |
| Supports Double Handle | ❌ | ✅ | ✅ | ❌ | ✅ |
| RTL Support | ✅ | ❌ | ❌ | ❌ | ✅ |
| Mobile Optimization | ✅ | ❌ | ✅ | ❌ | ✅ |
| Accessibility Features | ✅ | ❌ | ❌ | ❌ | ✅ |
| Built-in Themes/Skins | ❌ | ❌ | ✅ (6 skins) | ✅ | ✅ |
| Touch Support | ✅ | ❌ | ✅ | ✅ | ✅ |
Comparison of range slider plugins based on key features.
DXB Slider is designed with accessibility in mind:
- The range input is properly labeled using
aria-labelledby. - ARIA attributes (
aria-valuemin,aria-valuemax,aria-valuenow) are dynamically updated to reflect the current state of the slider. - The number input is added programmatically and hidden from screen readers (
aria-hidden="true") to avoid redundancy and potential confusion. - The slider can be operated using keyboard controls (arrow keys for fine adjustment, Page Up/Down for larger steps).
- Arrow Left/Down: Decrease value by one step
- Arrow Right/Up: Increase value by one step
- Page Down: Decrease value by 10% of the range
- Page Up: Increase value by 10% of the range
- Home: Set to minimum value
- End: Set to maximum value
DXB Slider is optimized for mobile devices, providing an enhanced user experience:
- The number input field automatically triggers the appropriate software keyboard on mobile devices:
- For whole number inputs, a numeric keyboard is displayed.
- For decimal inputs (when the slider's
stepattribute includes decimals), a decimal keyboard is shown.
- The
patternattribute ensures that only valid numeric input is accepted. - These optimizations work across modern mobile browsers, including Safari.
- Make default design fully WCAG AA or AAA compliant
- Add support for tickmarks to aide stepped slider user experience
- Add more design customization options, for example for the handle shape
- Optimize performance for pages with frequent DOM changes
-
Q: How do I customize the slider's appearance?
A: You can customize the slider by modifying the CSS variables in the
:rootselector. Refer to the Customization section for more details. -
Q: Does DXB Slider support touch devices?
A: Yes, DXB Slider is designed to work on both desktop and touch devices.
-
Q: How do I enable RTL support?
A: Add the
dir="rtl"attribute to a parent element. Refer to the RTL Support section for more details. -
Q: What browsers are supported?
A: DXB Slider supports all modern browsers. Note that language-specific numeral features are currently best supported in Firefox.
-
Q: How can I contribute to the project?
A: Contributions are welcome! Please open an issue or submit a pull request. Refer to the Contributing section for more details.
-
Q: How does DXB Slider handle input on mobile devices?
A: DXB Slider automatically displays the appropriate software keyboard (numeric or decimal) on mobile devices based on the slider's configuration. This ensures a smooth input experience for users on touch devices.
-
Q: Does DXB Slider support dynamically added content?
A: Yes, DXB Slider automatically detects and initializes new sliders added to the page after the initial load.
-
Q:Is DXB Slider really only 1KB?
A: Yes, DXB Slider's minified payload is only 894 bytes at the time of writing. This is possible due to modern browsers supprting CSS styling of native HTML range inputs. Feel free to count the bytes yourself:
This project is licensed under the GNU General Public License v2.0 (GPL-2.0) - see the LICENSE file for details.
Contributions are welcome! Please open an issue or submit a pull request.