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

Comparing version 0.9.10 to 1.0.0

CHANGELOG.md

 # Changelog
 
+## v1.0.0
+
+18.12.2024.
+
+### Changed
+
+- **Breaking Change**: Removed `thumbWidth` property; solved it more elegantly using CSS calc()
+
 ## v0.9.10
@@ -4,0 +12,0 @@

dist/index.d.ts

@@ -5,3 +5,2 @@ declare class DualRangeInput {
     precision: number;
-    thumbWidthVariable: string;
     /**
@@ -12,3 +11,3 @@ * @param {HTMLInputElement} $min - The range input element for the minimum value
      */
-    constructor($min: HTMLInputElement, $max: HTMLInputElement, thumbWidth?: string, precision?: number);
+    constructor($min: HTMLInputElement, $max: HTMLInputElement, precision?: number);
     private updateFloor;
@@ -15,0 +14,0 @@ private updateCeil;

dist/index.js

@@ -7,3 +7,3 @@ class DualRangeInput {
      */
-    constructor($min, $max, thumbWidth = '', precision = 3) {
+    constructor($min, $max, precision = 3) {
         this.updateFloor = () => this.update('floor');
@@ -14,3 +14,2 @@ this.updateCeil = () => this.update('ceil');
         this.precision = precision;
-        this.thumbWidthVariable = thumbWidth;
         this.$min.addEventListener('input', this.updateCeil);
@@ -31,5 +30,6 @@ this.$max.addEventListener('input', this.updateFloor);
     update(method = 'ceil') {
+        const thumbWidthVar = 'var(--dri-thumb-width)';
         const min = parseFloat(this.$min.min);
         const max = parseFloat(this.$max.max);
-        const step = parseFloat(this.$min.step);
+        const step = parseFloat(this.$min.step) || 1;
         const minValue = parseFloat(this.$min.value);
@@ -40,12 +40,6 @@ const maxValue = parseFloat(this.$max.value);
         const range = max - min;
-        // If the thumb width wasn't passed in, get it from the CSS variable
-        if (!this.thumbWidthVariable) {
-            this.thumbWidthVariable = getComputedStyle(this.$min).getPropertyValue('--dri-thumb-width');
-        }
-        const thumbWidth = parseFloat(this.thumbWidthVariable);
-        const thumbWidthUnit = this.thumbWidthVariable.replace(/^[\d\.]+/, ''); // px, em, rem...
-        const leftWidth = ((mid - min) / range) * 100;
-        const rightWidth = ((max - mid) / range) * 100;
-        this.$min.style.flexBasis = `calc(${leftWidth}% + ${this.thumbWidthVariable})`;
-        this.$max.style.flexBasis = `calc(${rightWidth}% + ${this.thumbWidthVariable})`;
+        const leftWidth = (((mid - min) / range) * 100).toFixed(this.precision);
+        const rightWidth = (((max - mid) / range) * 100).toFixed(this.precision);
+        this.$min.style.flexBasis = `calc(${leftWidth}% + ${thumbWidthVar})`;
+        this.$max.style.flexBasis = `calc(${rightWidth}% + ${thumbWidthVar})`;
         this.$min.max = mid.toFixed(this.precision);
@@ -55,6 +49,8 @@ this.$max.min = mid.toFixed(this.precision);
         const maxFill = (maxValue - mid) / (max - mid) || 0;
-        const minFillThumb = ((0.5 - minFill) * thumbWidth).toFixed(this.precision);
-        const maxFillThumb = ((0.5 - maxFill) * thumbWidth).toFixed(this.precision);
-        this.$min.style.setProperty('--dri-gradient-position', `calc(${(minFill * 100).toFixed(this.precision)}% + ${minFillThumb}${thumbWidthUnit})`);
-        this.$max.style.setProperty('--dri-gradient-position', `calc(${(maxFill * 100).toFixed(this.precision)}% + ${maxFillThumb}${thumbWidthUnit})`);
+        const minFillPercentage = (minFill * 100).toFixed(this.precision);
+        const maxFillPercentage = (maxFill * 100).toFixed(this.precision);
+        const minFillThumb = (0.5 - minFill).toFixed(this.precision);
+        const maxFillThumb = (0.5 - maxFill).toFixed(this.precision);
+        this.$min.style.setProperty('--dri-gradient-position', `calc(${minFillPercentage}% + (${minFillThumb} * ${thumbWidthVar}))`);
+        this.$max.style.setProperty('--dri-gradient-position', `calc(${maxFillPercentage}% + (${maxFillThumb} * ${thumbWidthVar}))`);
     }
@@ -61,0 +57,0 @@ destroy() {

package.json

 {
   "name": "@stanko/dual-range-input",
   "description": "Native dual-range input in about sixty lines of JavaScript",
-  "version": "0.9.10",
+  "version": "1.0.0",
   "private": false,
@@ -6,0 +6,0 @@ "type": "module",

README.md

@@ -40,4 +40,3 @@ # Native Dual-range Input
 
-// The third parameter is the thumb width and should be the same as "--dri-thumb-width" CSS variable
-new DualRangeInput($min, $max, '1.25rem');
+new DualRangeInput($min, $max);
 
@@ -54,3 +53,2 @@ // Add native event handlers
 - **$max** `HTMLInputElement` - The range input element for the maximum value
-- **thumbWidth** `string` - Thumb width in CSS units. It must be the same as the `--dri-thumb-width` CSS variable. If it is not passed, the library will try to read it from the CSS variable. However, there is a weird edge case in Safari where JavaScript seems to be executed before CSS is applied. If you encounter this issue, you'll have to pass the value manually. If you find a more elegant solution, please let me know.
 - **precision** `number`, optional, defaults to 3 - The number of decimal places to round the mid value to
@@ -65,22 +63,31 @@
 ```css
-.dual-range-input {
-  --dri-thumb-width: 1.25rem;
-  --dri-thumb-height: 1.25rem;
+/* Height of the input */
+--dri-height: 1.5rem;
 
-  --dri-thumb-color: #ddd;
-  --dri-thumb-hover-color: #a8d5ff;
-  --dri-thumb-active-color: #4eaaff;
-  --dri-thumb-border-color: rgba(0, 0, 0, 0.1);
-  --dri-thumb-border-radius: 1rem;
+/* Thumb size */
+--dri-thumb-width: 1.25rem;
+--dri-thumb-height: 1.25rem;
 
-  --dri-track-height: 0.25rem;
-  --dri-track-color: #ccc;
-  --dri-track-filled-color: #0084ff;
-  --dri-track-border-radius: 1rem;
+/* Thumb background color */
+--dri-thumb-color: #ddd;
+--dri-thumb-hover-color: #a8d5ff;
+--dri-thumb-active-color: #4eaaff;
 
-  --dri-height: 1.5rem;
-}
+/* Thumb border */
+--dri-thumb-border-color: rgba(0, 0, 0, 0.1);
+--dri-thumb-border-hover-color: var(--dri-thumb-border-color);
+--dri-thumb-border-active-color: var(--dri-thumb-border-color);
+--dri-thumb-border-radius: 1rem;
+--dri-thumb-border-width: 1px;
+
+/* Track size */
+--dri-track-height: 0.25rem;
+--dri-track-border-radius: 1rem;
+
+/* Track color */
+--dri-track-color: #ccc;
+--dri-track-filled-color: #0084ff;
 ```
 
-Please note that `--dri-thumb-width` is used in JavaScript for calculations.
+Please note that `--dri-thumb-width` is used by the library through the CSS `calc()` methods.
 
@@ -110,2 +117,4 @@ ### Custom theme
 
+You can find more examples in the [demo SCSS file](./demo/index.scss).
+
 ### :focus-visible styles
@@ -112,0 +121,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24454

8.35%

Number of package files

9

12.5%

Lines of code

221

1.84%

Number of low quality alerts

0

-100%

Number of lines in readme file

219

4.29%

No dependency changes