https://github.com/pshihn/planar-range
A 2D range component
https://github.com/pshihn/planar-range
Last synced: about 1 month ago
JSON representation
A 2D range component
- Host: GitHub
- URL: https://github.com/pshihn/planar-range
- Owner: pshihn
- License: mit
- Created: 2020-04-18T07:20:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T00:44:39.000Z (almost 3 years ago)
- Last Synced: 2025-04-15T19:09:14.616Z (about 1 month ago)
- Language: TypeScript
- Size: 64.5 KB
- Stars: 48
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
*\* is a custom-element akin to HTML's standard input range (*2kb gzipped*). Instead of one thumb that moves linearly, this element can have as many thumbs as required, and they move in two dimensions. The element supports all pointer devices.
Each thumb is represented as a *\* custom-element and can have an `x` and `y` value. The values are always between `0` and `1`.
[Read full documentation](https://github.com/pshihn/planar-range/wiki/Planar-Range) with links to live playground on glitch.
```html
```
## Styling
The range element and the thumbs can be sized and styled via CSS. The element doesn't need to be square. The values of `x` and `y` (between 0 and 1) interpolate with the width and height.
```html
planar-range {
border: none;
background: pink;
width: 500px;
height: 200px;
}
planar-range-thumb {
width: 20px;
height: 20px;
border: none;
}
planar-range-thumb[name="p1"] {
background: red;
}
planar-range-thumb[name="p3"] {
background: blue;
}
```
## Uses
The *planar-range* control itself is simple and kinda low-level. But, you can use it to create more complex UI components like a cubic-bezier creator or a HSL based color picker
Basic demos of these are in the examples folder.
## Installing
Available on npm
```
npm install --save planar-range
```
Or source it in your page
```html
```
## Events
Each thumb fires a `change` event. The `event.detail` object gives the `x`, `y` value of the thumb and its `name` attribute.
```html
// attach to range element
document.querySelector('planar-range')
.addEventListener('change', ({ detail }) => {
console.log(detail.x, detail.y, detail.name);
// 0.2 0.2 p2
});
// Or attach to individual thumb
document.querySelector('#p2')
.addEventListener('change', ({ detail }) => {
console.log(detail.x, detail.y, detail.name);
// 0.2 0.2 p2
});
```
## PlanarRangeThumb *\* properties
**x**: The numeric `x` value of the thumb. The range is between `[0, 1]`.
**y**: The numeric `y` value of the thumb. The range is between `[0, 1]`.
**value**: A 2D array of `[x, y]` value. e.g. `thumb.value = [0.2, 0.6];`
## PlanarRange *\* properties
**values**: Readonly property to get the values of all the thumbs in the range. An array of Objects. Each object has the `x`, `y` value of the thumb, and its `name` attribute.