@stanko/dual-range-input
Advanced tools
Comparing version
# 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 @@ |
@@ -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; |
@@ -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() { |
{ | ||
"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", |
@@ -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 @@ |
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
24454
8.35%9
12.5%221
1.84%0
-100%219
4.29%