Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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






range slider element preview example




## 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)