https://github.com/andreruffert/range-slider-element
🎚 A cross browser customizable and accessible <range-slider> web component
https://github.com/andreruffert/range-slider-element
custom-element multi-thumb range-slider ui web-component
Last synced: 3 months ago
JSON representation
🎚 A cross browser customizable and accessible <range-slider> web component
- Host: GitHub
- URL: https://github.com/andreruffert/range-slider-element
- Owner: andreruffert
- License: mit
- Created: 2019-09-28T17:09:38.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T14:01:31.000Z (3 months ago)
- Last Synced: 2025-03-29T02:03:51.310Z (3 months ago)
- Topics: custom-element, multi-thumb, range-slider, ui, web-component
- Language: JavaScript
- Homepage: https://andreruffert.github.io/range-slider-element/
- Size: 544 KB
- Stars: 64
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-standalones - `<range-slider>`
- awesome-web-components - `<range-slider>` - Accessible range slider custom element with keyboard support. (Real World / Components)
README
# <range-slider> element
> A cross browser customizable and accessible <range-slider> web component.
[](https://github.com/andreruffert/range-slider-element/actions/workflows/test.yml)
[](https://www.npmjs.com/package/range-slider-element)
[](https://pkg-size.dev/range-slider-element)
[](https://www.npmjs.com/package/range-slider-element)
## Features
* Framework agnostic [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) (no dependencies)
* Cross browser customizable styling
* Single and multi thumb
* Horizontal and vertical orientations
* Works like a built-in HTML form element (uses [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals))
* Keyboard accessible (use arrow keys)
* Touch friendly
* Follows the [ARIA best practices guide on sliders](https://www.w3.org/WAI/ARIA/apg/patterns/slider)
## Install
Install via npm
```shell
npm install range-slider-element
```
## Usage
### JavaScript
Import as ES module
```js
import 'range-slider-element';
```
Or via CDN
```html
```
### HTML
```html
```
### CSS
Make sure to load the base styles exported via `range-slider-element/style.css`.
Or via CDN
```html
```
## Attributes
* `min` The minimum permitted value. The default is `0`.
* `max` The maximum permitted value. The default is `100`.
* `step` The stepping interval. The default is `1`.
* `value` The value. The default is `min + (max - min) / 2`.
* [`dir`][dir] Directionality. The default is ltr. Allowed options `rtl`.
* `orientation` The default is horizontal. Allowed options `vertical`.
[dir]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
## Styling
**CSS custom properties**
Exposed CSS custom properties scoped within the `range-slider` element.
* `--track-size` - The track size. The default is `0.2rem`. Can be overwritten for customization.
* `--thumb-size` - The thumb size. The default is `1.2rem`. Can be overwritten for customization.
**DOM selectors**
```css
range-slider {}
range-slider [data-track] {}
range-slider [data-track-fill] {}
range-slider [data-thumb] {}
/* Advanced customization */
range-slider [data-runnable-track] {}
```
For examples of how to customize the default styling, check out the [docs][docs].
[docs]: https://andreruffert.github.io/range-slider-element
## Events
* `input` - Pointer move, value changed. Bubbles.
* `change` - Pointer up, key up, value changed. Bubbles.
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## License
Distributed under the MIT license. See LICENSE for details.
© [André Ruffert](https://andreruffert.com)