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

Comparing version 0.9.2 to 0.9.3

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.

package.json

 {
   "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",

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:
+
+![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;
+    }
+  }
+  ```

No alert changes

Improved metrics

Total package byte prevSize

18516

10.97%

Lines of code

197

0.51%

Number of lines in readme file

157

112.16%

No dependency changes