@stanko/dual-range-input
Advanced tools
Comparing version
# Changelog | ||
## v0.9.0, v0.9.1, v0.9.2 | ||
## v0.9.0 - v0.9.3 | ||
@@ -5,0 +5,0 @@ 17.11.2024. |
{ | ||
"name": "@stanko/dual-range-input", | ||
"description": "Native dual range input in about fifty lines of JavaScript", | ||
"version": "0.9.2", | ||
"version": "0.9.3", | ||
"private": false, | ||
@@ -6,0 +6,0 @@ "type": "module", |
123
README.md
# Native Dual Range Input | ||
The native part is somewhat open for discussion. | ||
But the implementation uses two native range inputs | ||
The native part is somewhat open for discussion - the library uses two native range inputs | ||
and about [fifty lines of JavaScript](https://cdn.jsdelivr.net/npm/@stanko/dual-range-input/dist/index.js) to make them work together. | ||
In my book, it is _native enough_. | ||
It still uses all of the native interactions and accessibility features. | ||
In my book, that is _native enough_. | ||
If you are interested in how it works, please check the [blog post](https://muffinman.io/blog/native-dual-range-input). | ||
React version is coming soon. | ||
## Usage | ||
Required markup: | ||
Install it: | ||
```bash | ||
npm install @stanko/dual-range-input | ||
``` | ||
Add the required markup: | ||
```html | ||
@@ -21,4 +28,10 @@ <div class="dual-range-input"> | ||
JavaScript: | ||
Import the CSS file located at: | ||
``` | ||
@stanko/dual-range-input/dist/index.css; | ||
``` | ||
Instantiate the library: | ||
```js | ||
@@ -31,11 +44,5 @@ import DualRangeInput from '@stanko/dual-range-input'; | ||
new DualRangeInput($min, $max); | ||
``` | ||
CSS: | ||
Don't forget to include CSS | ||
// Add native event handlers | ||
``` | ||
@stanko/dual-range-input/dist/index.css | ||
``` | ||
@@ -50,8 +57,8 @@ ### Styling | ||
.dual-range-input { | ||
--dri-thumb-width: 1rem; | ||
--dri-thumb-height: 1rem; | ||
--dri-thumb-width: 1.25rem; | ||
--dri-thumb-height: 1.25rem; | ||
--dri-thumb-color: #ddd; | ||
--dri-thumb-hover-color: rgb(168, 213, 255); | ||
--dri-thumb-active-color: rgb(78, 170, 255); | ||
--dri-thumb-hover-color: #a8d5ff; | ||
--dri-thumb-active-color: #4eaaff; | ||
--dri-thumb-border-color: rgba(0, 0, 0, 0.1); | ||
@@ -62,3 +69,3 @@ --dri-thumb-border-radius: 1rem; | ||
--dri-track-color: #ccc; | ||
--dri-track-filled-color: rgb(0, 132, 255); | ||
--dri-track-filled-color: #0084ff; | ||
--dri-track-border-radius: 1rem; | ||
@@ -70,2 +77,45 @@ | ||
To create your own styling, just change the variables. For example here is code for the purple example from the demo page: | ||
```scss | ||
.dual-range-input--purple { | ||
--dri-thumb-width: 2rem; | ||
--dri-thumb-height: 2rem; | ||
--dri-thumb-color: #ddd; | ||
--dri-thumb-active-color: #682af8; | ||
--dri-thumb-hover-color: #b697ff; | ||
--dri-track-filled-color: #682af8; | ||
--dri-height: 2rem; | ||
} | ||
``` | ||
This gives you: | ||
 | ||
### :focus-visible styles | ||
These are the default focus styles, feel free to override them. | ||
```scss | ||
.dual-range-input:has(input:focus-visible) { | ||
outline: 2px solid var(--dri-thumb-active-color); | ||
outline-offset: 4px; | ||
border-radius: 4px; | ||
} | ||
``` | ||
### API | ||
- The only available public method is `destroy()` which removes event listeners set by the library. | ||
```js | ||
const priceInput = new DualRangeInput($min, $max); | ||
priceInput.destroy(); | ||
``` | ||
## TODO | ||
@@ -76,4 +126,37 @@ | ||
- [x] Publish the package | ||
- [x] RTL | ||
- [x] Write a blog post | ||
- [ ] Add (p)react version | ||
- [ ] Write a blog post | ||
- [x] RTL | ||
## Other | ||
- Library is only available as ESM module. | ||
- Library doesn't include border around the track, it just feels too hacky. But here is the code if you want to use it: | ||
```scss | ||
.dual-range-input { | ||
--dri-track-border-color: #ccc; | ||
position: relative; | ||
&::before { | ||
content: ''; | ||
display: block; | ||
position: absolute; | ||
background-color: var(--dri-track-border-color); | ||
border-radius: var(--dri-track-border-radius); | ||
// Make it stick 1px on each side | ||
height: calc(var(--dri-track-height) + 2px); | ||
left: -1px; | ||
right: -1px; | ||
// Center it vertically | ||
top: 50%; | ||
transform: translateY(-50%); | ||
} | ||
input { | ||
// Put the inputs above it | ||
position: relative; | ||
z-index: 1; | ||
} | ||
} | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
18516
10.97%197
0.51%157
112.16%