New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@stanko/dual-range-input

Package Overview
Dependencies
Maintainers
0
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stanko/dual-range-input - npm Package Compare versions

Comparing version

to
0.9.3

2

CHANGELOG.md
# 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",

# 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:
![Dual range input styled in purple](./purple-example.png)
### :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