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: about 2 months 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 (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-02-27T03:58:23.000Z (over 1 year ago)
Last Synced: 2024-04-15T04:26:40.026Z (3 months ago)
Topics: custom-element, range-slider, range-slider-element, ui, web-component
Language: JavaScript
Homepage: https://andreruffert.github.io/range-slider-element/examples/
Size: 348 KB
Stars: 60
Watchers: 4
Forks: 5
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Lists

awesome-web-components - `<range-slider>` - Accessible range slider custom element with keyboard support. (Real World / Components)
awesome-standalones - `<range-slider>`

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)