Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreruffert/range-slider-element
π¬ <range-slider> custom element
https://github.com/andreruffert/range-slider-element
custom-element range-slider range-slider-element ui web-component
Last synced: 26 days ago
JSON representation
π¬ <range-slider> custom element
- Host: GitHub
- URL: https://github.com/andreruffert/range-slider-element
- Owner: andreruffert
- License: mit
- Created: 2019-09-28T17:09:38.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T03:12:42.000Z (3 months ago)
- Last Synced: 2024-10-01T03:01:19.389Z (about 1 month ago)
- Topics: custom-element, range-slider, range-slider-element, ui, web-component
- Language: JavaScript
- Homepage: https://andreruffert.github.io/range-slider-element/examples/
- Size: 453 KB
- Stars: 62
- Watchers: 4
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-web-components - `<range-slider>` - Accessible range slider custom element with keyboard support. (Real World / Components)
README
# <range-slider> element
> A customizable range slider element.
[![CI status](https://github.com/andreruffert/range-slider-element/workflows/CI/badge.svg)](https://github.com/andreruffert/range-slider-element/actions?workflow=CI)
[![npm version](https://img.shields.io/npm/v/range-slider-element.svg)](https://www.npmjs.com/package/range-slider-element)
[![npm downloads](https://img.shields.io/npm/dm/range-slider-element?logo=npm)](https://www.npmjs.com/package/range-slider-element)Accessible range slider custom element with keyboard support.
Follows the [ARIA best practices guide on sliders](https://www.w3.org/TR/wai-aria-practices/#slider).* No dependencies
* Customizable styling
* Touchscreen friendly
* Keyboard accessible
## Install
```console
$ npm install range-slider-element
```## Usage
```js
import 'range-slider-element';
``````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.[dir]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
### Styling
Exposed CSS custom properties scoped within the `range-slider` element.
* `--value-percent` - The current value in percentage, e.g. 50%
```css
range-slider {}
range-slider .thumb-wrapper {}
range-slider .thumb {}
```### Events
* `input` - Pointer move, value updated. Bubbles.
* `change` - Pointer up, value updated. 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
MIT Β© [AndrΓ© Ruffert](https://andreruffert.com)