{"repo":"andreruffert/range-slider-element","free":true,"listed":false,"github":"https://github.com/andreruffert/range-slider-element","clone":"git clone https://github.com/andreruffert/range-slider-element.git","description":"🎚 A cross browser customizable and accessible <range-slider> web component","language":"JavaScript","stars":93,"topics":["range-slider","ui","multi-thumb","web-components","javascript","slider","custom-elements"],"license":"MIT","category":"ui-components","readme_excerpt":"&lt;range-slider&gt; element A cross browser customizable and accessible &lt;range-slider&gt; web component. Features Framework agnostic web component (no dependencies) Cross browser customizable styling Single and multi thumb Horizontal and vertical orientations Works like a built-in HTML form element (uses ElementInternals) Keyboard accessible (use arrow keys) Touch friendly Follows the ARIA best practices guide on sliders Install Install via npm Usage JavaScript Import as ES module Or via CDN HTML CSS Make sure to load the base styles exported via range-slider-element/style.css . Or via CDN 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 For examples of how to customize the default styling, check out the [docs][docs]. [docs]: https://andreruffert.github.io/range-slider-element Events input - Pointe","default_branch":null,"files":null,"tree":[],"storefront":"/r/andreruffert","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/andreruffert/range-slider-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}