https://github.com/potch/range-num
A simple web component that combines a range input and a number input
https://github.com/potch/range-num
Last synced: about 1 year ago
JSON representation
A simple web component that combines a range input and a number input
- Host: GitHub
- URL: https://github.com/potch/range-num
- Owner: potch
- Created: 2023-12-07T04:12:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-07T05:10:50.000Z (over 2 years ago)
- Last Synced: 2025-03-27T03:03:24.636Z (about 1 year ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RangeNum
A vanilla web component that combines an `` and an
`` and keeps their values/attributes in sync.
## Installation
`npm install @potch/range-num`
## Usage
```js
// provided as an ES Module
import RangeNum from "@potch/range-num";
RangeNum.register();
// If you'd like to use a different tag name
RangeNum.register("my-cool-range-num");
```
```html
score
```
```js
const el = document.querySelector("range-num");
el.rangeInput; // the inner input[type="range"]
el.numInput; // the inner input[type="number"]
```
RangeNum uses "light" Shadow Dom, meaning its internal `` elements are
visible to DOM methods like `document.querySelectorAll('input')`
## Configuration
The following attributes will be propagated from the `` to its
inputs:
- `disabled`
- `disabled` attribute can also be set to `"number"`, which will then only apply
to the underlying ``.
- `max`
- `min`
- `name`
- only propagated to the inner ``. This is done to ensure
only one input with that name appears in `FormData`.
- `readonly`
- applies only to the inner ``.
- `step`
- `value`
- latest `value` is synchronized to both inner inputs as well as the top-level
``
## Demo
`npm run demo`