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)