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
1.0.0

LICENSE.md

8

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 @@

3

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;

@@ -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