rm-range-slider 0.0.1 → 3.0.1

package/README.md

@@ -1,85 +1,57 @@
-
-# Range-slider
-
-A highly optimized and fully customizable pure angular component for value range selection.
-
-The component is not re-rendered while user moves the thumb.
-Even if there is a label, only the label component is re-rendered when values are changed.
-
-RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail.
-These optimizations help to achieve as much native look & feel as possible using only the JS layer.
-
-
-## Installation
-
-Install my-project with npm
-
-```bash
-  npm: npm install --save rm-range-slider
-  yarn: yarn add rn-range-slider
-```
-
-
-## Usage
-
-Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2. 
-
-
-
-
-```
-...
-
-import {RmRangeSliderModule} from "@rm-range-slider";
-
-...
-
-<rm-range-slider
-	[SliderMinRange]="0"
-	[showToolTip]="true"
-	[doubleSlider]="true"
-	[SliderMaxRange]="100"
-	[disabled]="false"
-	[setMinValue]="10"
-	[setMaxValue]="60"
-	[toolTipColor]="'#8a00e5'"
-	[rangeColor]="'#8a00e5'"
-	[sliderColor]="'#C6C6C6'"
-	[toolTipColorHover]="'#b200e5ff'"
-	[toolTipColorHoverShadow]="'rgba(108, 0, 119, 0.3)'"
-	[sliderColorRight]="'rgba(239,7,65,0.98)'"
-	(onValueChanged)="onValueChanged($event)"
-></rm-range-slider>
-... 
-
-add root lavel style file
-:root {
-	--tooltip-arrow: red;
-	--slider-thumb-color: blue;
-	--slider-thumb-color-hover: blue;
-	--slider-thumb-color-hover-shadow:  rgba(108, 0, 119, 0.3);
-}
-... 
-```
-
-### Properties
-
-| Name                      | Description                                                          | Type    |                            Default Value                             |
-|---------------------------|----------------------------------------------------------------------|---------|:--------------------------------------------------------------------:|
-| `SliderMinRange`          | Minimum value of slider                                              | number  |        Initially `min` value will be set `0` if not provided         |
-| `SliderMaxRange`          | Maximum value of slider                                              | number  |       Initially `max` value will be set `100` if not provided        |
-| `showToolTip`             | Show or hide tool tip                                                | boolean |         Initially value will be set `false` if not provided          |
-| `doubleSlider`            | Use like SIngle Slider or double slider                              | boolean |          Initially value will be set `true` if not provided          |
-| `disabled`                | Disable or enable the slider moment                                  | boolean |         Initially value will be set `false` if not provided          |
-| `setMinValue`             | Min value for slider's thumbnail to set on                           | number  |        Initially `min` value will be set `0` if not provided         |
-| `setMaxValue`             | Max value for slider's thumbnail to set on                           | boolean |       Initially `max` value will be set `100` if not provided        |
-| `toolTipColor`            | set color for tool tip                                               | string  |        Initially set default color for tool tip is `#8a00e5`         |
-| `rangeColor`              | Set color for slider line between both min and max slider's thumnail | string  | Initially set default color for tool tip is `rgba(255,255,255,0.99)` |
-| `sliderColor`             | Set color for slider line                                            | string  | Initially set default color for tool tip is `rgba(255,255,255,0.47)` |
-| `toolTipColorHover`       | set color for tool tip on hover                                      | string  |        Initially set default color for tool tip is `#8a00e5'`        |
-| `toolTipColorHoverShadow` | set shadow color for tool tip on hover                               | string  |        Initially set default color for tool tip is `#8a00e5'`        |
-| `sliderColorRight`        | Set color for right side slider line                                 | string  |   Initially set default color for tool tip is `rgb(198, 198, 198)`   |
-| `onValueChanged`          | Emit both value object of min and max                                | object  |              It do not return any value until changes                |
-
-All the other props (e.g. style) will be passed to root container component.
-
+# Range-slider
+
+A highly optimized and fully customizable pure angular component for value range selection.
+
+The component is not re-rendered while user moves the thumb.
+Even if there is a label, only the label component is re-rendered when values are changed.
+
+RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail.
+These optimizations help to achieve as much native look & feel as possible using only the JS layer.
+
+## Installation
+
+Install my-project with npm
+
+```bash
+  npm: npm install --save rm-range-slider
+  yarn: yarn add rn-range-slider
+```
+
+## Usage
+
+Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
+
+```
+...
+
+import {RmRangeSliderModule} from "@rm-range-slider";
+
+...
+ <rm-range-slider
+    min="0"
+    max="100"
+    startValue="0"
+    endValue="10"
+    (onValueChanged)="onValueChanged($event)"
+    ></rm-range-slider>
+
+```
+
+### Version Mapping
+
+| Slider | Ng   |
+| ------ | ---- |
+| 0.0.1  | 14.x |
+| 1.0.0  | 15.x |
+| 2.0.0  | 16.x |
+| 3.0.0  | 17.x |
+
+### Properties
+
+| Name             | Description                           | Type   |                      Default Value                      |
+| ---------------- | ------------------------------------- | ------ | :-----------------------------------------------------: |
+| `min`            | Minimum value of slider               | number |  Initially `min` value will be set `0` if not provided  |
+| `max`            | Maximum value of slider               | number | Initially `max` value will be set `100` if not provided |
+| `startValue`     | Maximum value of slider               | number |  Initially `min` value will be set `0` if not provided  |
+| `endValue`       | Maximum value of slider               | number | Initially `max` value will be set `100` if not provided |
+| `onValueChanged` | Emit both value object of min and max | MINMAX |        It do not return any value until changes         |

package/esm2022/lib/rm-range-slider.component.mjs

@@ -0,0 +1,140 @@
+import { Component, EventEmitter, Input, Output, numberAttribute, } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatSliderModule } from '@angular/material/slider';
+import { Subject, takeUntil, throttleTime } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/slider";
+import * as i2 from "@angular/forms";
+export class RmRangeSliderComponent {
+    constructor() {
+        this.destroy$ = new Subject();
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case: */
+        this.startValue = 0;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
+      being defined as an input property with the following configuration: */
+        this.endValue = 10;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
+      defined as an input property with the following configuration: */
+        this.min = 0;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
+      defined as an input property with the following configuration: */
+        this.max = 100;
+        /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
+      the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
+      is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
+        this.onValueChanged = new EventEmitter();
+    }
+    /**
+     * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
+     * calls the `onSliderChange` function with this value.
+     */
+    onSliderInput() {
+        const value = {
+            from: this.startValue,
+            to: this.endValue,
+        };
+        this.onSliderChange(value);
+    }
+    /**
+     * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
+     * hundredth and appending a 'k' if the value is greater than or equal to 1000.
+     * @param {number} value - The `value` parameter is a number that represents a numerical value which
+     * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
+     * string representation of the number. If the value is greater than or equal to 1000, it will be
+     * rounded and displayed in
+     * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
+     * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
+     */
+    formatLabel(value) {
+        if (value >= 1000) {
+            return Math.round(value / 100) + 'k';
+        }
+        return `${value}`;
+    }
+    /**
+     * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
+     * throttle time of 5000 milliseconds.
+     * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
+     * value of the slider, which is of type `MINMAX`.
+     */
+    onSliderChange(value) {
+        this.destroy$.next();
+        this.destroy$.complete();
+        const sliderValueChanges$ = new Subject();
+        sliderValueChanges$
+            .pipe(throttleTime(5000), takeUntil(this.destroy$))
+            .subscribe((newValue) => {
+            this.onValueChanged.emit(newValue);
+        });
+        sliderValueChanges$.next(value);
+    }
+    /**
+     * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
+     * observables by completing a subject.
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.2", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
+    <mat-slider
+      [min]="this.min"
+      [max]="this.max"
+      showTickMarks
+      discrete
+      [displayWith]="formatLabel"
+      (change)="onSliderInput()"
+    >
+      <input matSliderStartThumb [(ngModel)]="startValue" />
+      <input matSliderEndThumb [(ngModel)]="endValue" />
+    </mat-slider>
+  `, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
+    <mat-slider
+      [min]="this.min"
+      [max]="this.max"
+      showTickMarks
+      discrete
+      [displayWith]="formatLabel"
+      (change)="onSliderInput()"
+    >
+      <input matSliderStartThumb [(ngModel)]="startValue" />
+      <input matSliderEndThumb [(ngModel)]="endValue" />
+    </mat-slider>
+  `, styles: ["mat-slider{width:100%}\n"] }]
+        }], propDecorators: { startValue: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], endValue: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], min: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], max: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], onValueChanged: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm0tcmFuZ2Utc2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3JtLXJhbmdlLXNsaWRlci9zcmMvbGliL3JtLXJhbmdlLXNsaWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFDTixlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7O0FBNkJ4RCxNQUFNLE9BQU8sc0JBQXNCO0lBdkJuQztRQXdCVSxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUV2Qzs4RUFDc0U7UUFLdEUsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUV2Qjs7NkVBRXFFO1FBS3JFLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFdEI7O3VFQUUrRDtRQUsvRCxRQUFHLEdBQVcsQ0FBQyxDQUFDO1FBRWhCOzt1RUFFK0Q7UUFLL0QsUUFBRyxHQUFXLEdBQUcsQ0FBQztRQUVsQjs7d0ZBRWdGO1FBRXpFLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQTBEcEQ7SUF4REM7OztPQUdHO0lBQ0gsYUFBYTtRQUNYLE1BQU0sS0FBSyxHQUFXO1lBQ3BCLElBQUksRUFBRSxJQUFJLENBQUMsVUFBVTtZQUNyQixFQUFFLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDbEIsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVEOzs7Ozs7Ozs7T0FTRztJQUVILFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLElBQUksS0FBSyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2xCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDO1FBQ3ZDLENBQUM7UUFDRCxPQUFPLEdBQUcsS0FBSyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0gsY0FBYyxDQUFDLEtBQWE7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ3pCLE1BQU0sbUJBQW1CLEdBQUcsSUFBSSxPQUFPLEVBQVUsQ0FBQztRQUNsRCxtQkFBbUI7YUFDaEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQ2xELFNBQVMsQ0FBQyxDQUFDLFFBQWdCLEVBQUUsRUFBRTtZQUM5QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNyQyxDQUFDLENBQUMsQ0FBQztRQUNMLG1CQUFtQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOzhHQW5HVSxzQkFBc0I7a0dBQXRCLHNCQUFzQixzR0FPcEIsZUFBZSxzQ0FTZixlQUFlLHVCQVNmLGVBQWUsdUJBU2YsZUFBZSw0RUFyRGxCOzs7Ozs7Ozs7Ozs7R0FZVCxpR0FiUyxlQUFlLHNZQUFFLFdBQVc7OzJGQW9CM0Isc0JBQXNCO2tCQXZCbEMsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsV0FBVyxDQUFDLFlBQzdCOzs7Ozs7Ozs7Ozs7R0FZVDs4QkFnQkQsVUFBVTtzQkFKVCxLQUFLO3VCQUFDO3dCQUNMLFFBQVEsRUFBRSxJQUFJO3dCQUNkLFNBQVMsRUFBRSxlQUFlO3FCQUMzQjtnQkFVRCxRQUFRO3NCQUpQLEtBQUs7dUJBQUM7d0JBQ0wsUUFBUSxFQUFFLElBQUk7d0JBQ2QsU0FBUyxFQUFFLGVBQWU7cUJBQzNCO2dCQVVELEdBQUc7c0JBSkYsS0FBSzt1QkFBQzt3QkFDTCxRQUFRLEVBQUUsSUFBSTt3QkFDZCxTQUFTLEVBQUUsZUFBZTtxQkFDM0I7Z0JBVUQsR0FBRztzQkFKRixLQUFLO3VCQUFDO3dCQUNMLFFBQVEsRUFBRSxJQUFJO3dCQUNkLFNBQVMsRUFBRSxlQUFlO3FCQUMzQjtnQkFPTSxjQUFjO3NCQURwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE91dHB1dCxcbiAgbnVtYmVyQXR0cmlidXRlLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0U2xpZGVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2xpZGVyJztcbmltcG9ydCB7IFN1YmplY3QsIHRha2VVbnRpbCwgdGhyb3R0bGVUaW1lIH0gZnJvbSAncnhqcyc7XG5leHBvcnQgaW50ZXJmYWNlIE1JTk1BWCB7XG4gIGZyb206IG51bWJlcjtcbiAgdG86IG51bWJlcjtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncm0tcmFuZ2Utc2xpZGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW01hdFNsaWRlck1vZHVsZSwgRm9ybXNNb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxtYXQtc2xpZGVyXG4gICAgICBbbWluXT1cInRoaXMubWluXCJcbiAgICAgIFttYXhdPVwidGhpcy5tYXhcIlxuICAgICAgc2hvd1RpY2tNYXJrc1xuICAgICAgZGlzY3JldGVcbiAgICAgIFtkaXNwbGF5V2l0aF09XCJmb3JtYXRMYWJlbFwiXG4gICAgICAoY2hhbmdlKT1cIm9uU2xpZGVySW5wdXQoKVwiXG4gICAgPlxuICAgICAgPGlucHV0IG1hdFNsaWRlclN0YXJ0VGh1bWIgWyhuZ01vZGVsKV09XCJzdGFydFZhbHVlXCIgLz5cbiAgICAgIDxpbnB1dCBtYXRTbGlkZXJFbmRUaHVtYiBbKG5nTW9kZWwpXT1cImVuZFZhbHVlXCIgLz5cbiAgICA8L21hdC1zbGlkZXI+XG4gIGAsXG4gIHN0eWxlczogYFxuICAgIG1hdC1zbGlkZXIge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBSbVJhbmdlU2xpZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgLyogVGhlIGBASW5wdXRgIGRlY29yYXRvciBpbiB0aGUgVHlwZVNjcmlwdCBjb2RlIHNuaXBwZXQgaXMgdXNlZCB0byBkZWZpbmUgYW4gaW5wdXQgcHJvcGVydHkgZm9yIHRoZVxuYFJtUmFuZ2VTbGlkZXJDb21wb25lbnRgIGNvbXBvbmVudCBpbiBBbmd1bGFyLiBJbiB0aGlzIHNwZWNpZmljIGNhc2U6ICovXG4gIEBJbnB1dCh7XG4gICAgcmVxdWlyZWQ6IHRydWUsXG4gICAgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUsXG4gIH0pXG4gIHN0YXJ0VmFsdWU6IG51bWJlciA9IDA7XG5cbiAgLyogVGhlIGBASW5wdXRgIGRlY29yYXRvciBpbiB0aGUgVHlwZVNjcmlwdCBjb2RlIHNuaXBwZXQgaXMgdXNlZCB0byBkZWZpbmUgYW4gaW5wdXQgcHJvcGVydHkgZm9yIHRoZVxuYFJtUmFuZ2VTbGlkZXJDb21wb25lbnRgIGNvbXBvbmVudCBpbiBBbmd1bGFyLiBJbiB0aGlzIHNwZWNpZmljIGNhc2UsIHRoZSBgZW5kVmFsdWVgIHByb3BlcnR5IGlzXG5iZWluZyBkZWZpbmVkIGFzIGFuIGlucHV0IHByb3BlcnR5IHdpdGggdGhlIGZvbGxvd2luZyBjb25maWd1cmF0aW9uOiAqL1xuICBASW5wdXQoe1xuICAgIHJlcXVpcmVkOiB0cnVlLFxuICAgIHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlLFxuICB9KVxuICBlbmRWYWx1ZTogbnVtYmVyID0gMTA7XG5cbiAgLyogVGhlIGBASW5wdXRgIGRlY29yYXRvciBpbiB0aGUgVHlwZVNjcmlwdCBjb2RlIHNuaXBwZXQgaXMgdXNlZCB0byBkZWZpbmUgYW4gaW5wdXQgcHJvcGVydHkgZm9yIHRoZVxuYFJtUmFuZ2VTbGlkZXJDb21wb25lbnRgIGNvbXBvbmVudCBpbiBBbmd1bGFyLiBJbiB0aGlzIHNwZWNpZmljIGNhc2UsIHRoZSBgbWluYCBwcm9wZXJ0eSBpcyBiZWluZ1xuZGVmaW5lZCBhcyBhbiBpbnB1dCBwcm9wZXJ0eSB3aXRoIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhdGlvbjogKi9cbiAgQElucHV0KHtcbiAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSxcbiAgfSlcbiAgbWluOiBudW1iZXIgPSAwO1xuXG4gIC8qIFRoZSBgQElucHV0YCBkZWNvcmF0b3IgaW4gdGhlIFR5cGVTY3JpcHQgY29kZSBzbmlwcGV0IGlzIHVzZWQgdG8gZGVmaW5lIGFuIGlucHV0IHByb3BlcnR5IGZvciB0aGVcbmBSbVJhbmdlU2xpZGVyQ29tcG9uZW50YCBjb21wb25lbnQgaW4gQW5ndWxhci4gSW4gdGhpcyBzcGVjaWZpYyBjYXNlLCB0aGUgYG1heGAgcHJvcGVydHkgaXMgYmVpbmdcbmRlZmluZWQgYXMgYW4gaW5wdXQgcHJvcGVydHkgd2l0aCB0aGUgZm9sbG93aW5nIGNvbmZpZ3VyYXRpb246ICovXG4gIEBJbnB1dCh7XG4gICAgcmVxdWlyZWQ6IHRydWUsXG4gICAgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUsXG4gIH0pXG4gIG1heDogbnVtYmVyID0gMTAwO1xuXG4gIC8qIFRoZSBgQE91dHB1dCgpYCBkZWNvcmF0b3IgaW4gdGhlIFR5cGVTY3JpcHQgY29kZSBzbmlwcGV0IGlzIHVzZWQgdG8gZGVmaW5lIGFuIG91dHB1dCBwcm9wZXJ0eSBmb3JcbnRoZSBgUm1SYW5nZVNsaWRlckNvbXBvbmVudGAgY29tcG9uZW50IGluIEFuZ3VsYXIuIEluIHRoaXMgc3BlY2lmaWMgY2FzZSwgdGhlIGBnZXRNaW5NYXhgIHByb3BlcnR5XG5pcyBiZWluZyBkZWZpbmVkIGFzIGFuIG91dHB1dCBwcm9wZXJ0eSB3aXRoIHRoZSB0eXBlIG9mIGBFdmVudEVtaXR0ZXI8TUlOTUFYPmAuICovXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgb25WYWx1ZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE1JTk1BWD4oKTtcblxuICAvKipcbiAgICogVGhlIGBvblNsaWRlcklucHV0YCBmdW5jdGlvbiBzZXRzIHRoZSBgdmFsdWVgIG9iamVjdCB3aXRoIGBzdGFydFZhbHVlYCBhbmQgYGVuZFZhbHVlYCBwcm9wZXJ0aWVzIGFuZFxuICAgKiBjYWxscyB0aGUgYG9uU2xpZGVyQ2hhbmdlYCBmdW5jdGlvbiB3aXRoIHRoaXMgdmFsdWUuXG4gICAqL1xuICBvblNsaWRlcklucHV0KCk6IHZvaWQge1xuICAgIGNvbnN0IHZhbHVlOiBNSU5NQVggPSB7XG4gICAgICBmcm9tOiB0aGlzLnN0YXJ0VmFsdWUsXG4gICAgICB0bzogdGhpcy5lbmRWYWx1ZSxcbiAgICB9O1xuICAgIHRoaXMub25TbGlkZXJDaGFuZ2UodmFsdWUpO1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBgZm9ybWF0TGFiZWxgIGZ1bmN0aW9uIGluIFR5cGVTY3JpcHQgZm9ybWF0cyBhIG51bWJlciB2YWx1ZSBieSByb3VuZGluZyBpdCB0byB0aGUgbmVhcmVzdFxuICAgKiBodW5kcmVkdGggYW5kIGFwcGVuZGluZyBhICdrJyBpZiB0aGUgdmFsdWUgaXMgZ3JlYXRlciB0aGFuIG9yIGVxdWFsIHRvIDEwMDAuXG4gICAqIEBwYXJhbSB7bnVtYmVyfSB2YWx1ZSAtIFRoZSBgdmFsdWVgIHBhcmFtZXRlciBpcyBhIG51bWJlciB0aGF0IHJlcHJlc2VudHMgYSBudW1lcmljYWwgdmFsdWUgd2hpY2hcbiAgICogbmVlZHMgdG8gYmUgZm9ybWF0dGVkLiBUaGUgYGZvcm1hdExhYmVsYCBmdW5jdGlvbiB0YWtlcyB0aGlzIG51bWJlciBhcyBpbnB1dCBhbmQgcmV0dXJucyBhIGZvcm1hdHRlZFxuICAgKiBzdHJpbmcgcmVwcmVzZW50YXRpb24gb2YgdGhlIG51bWJlci4gSWYgdGhlIHZhbHVlIGlzIGdyZWF0ZXIgdGhhbiBvciBlcXVhbCB0byAxMDAwLCBpdCB3aWxsIGJlXG4gICAqIHJvdW5kZWQgYW5kIGRpc3BsYXllZCBpblxuICAgKiBAcmV0dXJucyBJZiB0aGUgYHZhbHVlYCBpcyBncmVhdGVyIHRoYW4gb3IgZXF1YWwgdG8gMTAwMCwgdGhlIGZ1bmN0aW9uIHdpbGwgcmV0dXJuIHRoZSB2YWx1ZSBkaXZpZGVkXG4gICAqIGJ5IDEwMCBhbmQgcm91bmRlZCwgZm9sbG93ZWQgYnkgdGhlIGxldHRlciAnaycuIE90aGVyd2lzZSwgaXQgd2lsbCByZXR1cm4gdGhlIHZhbHVlIGFzIGEgc3RyaW5nLlxuICAgKi9cblxuICBmb3JtYXRMYWJlbCh2YWx1ZTogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPj0gMTAwMCkge1xuICAgICAgcmV0dXJuIE1hdGgucm91bmQodmFsdWUgLyAxMDApICsgJ2snO1xuICAgIH1cbiAgICByZXR1cm4gYCR7dmFsdWV9YDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgYG9uU2xpZGVyQ2hhbmdlYCBmdW5jdGlvbiBpbiBUeXBlU2NyaXB0IHNldHMgdXAgYSBTdWJqZWN0IHRvIGVtaXQgc2xpZGVyIHZhbHVlIGNoYW5nZXMgd2l0aCBhXG4gICAqIHRocm90dGxlIHRpbWUgb2YgNTAwMCBtaWxsaXNlY29uZHMuXG4gICAqIEBwYXJhbSB7TUlOTUFYfSB2YWx1ZSAtIFRoZSBgdmFsdWVgIHBhcmFtZXRlciBpbiB0aGUgYG9uU2xpZGVyQ2hhbmdlYCBtZXRob2QgcmVwcmVzZW50cyB0aGUgY3VycmVudFxuICAgKiB2YWx1ZSBvZiB0aGUgc2xpZGVyLCB3aGljaCBpcyBvZiB0eXBlIGBNSU5NQVhgLlxuICAgKi9cbiAgb25TbGlkZXJDaGFuZ2UodmFsdWU6IE1JTk1BWCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgICBjb25zdCBzbGlkZXJWYWx1ZUNoYW5nZXMkID0gbmV3IFN1YmplY3Q8TUlOTUFYPigpO1xuICAgIHNsaWRlclZhbHVlQ2hhbmdlcyRcbiAgICAgIC5waXBlKHRocm90dGxlVGltZSg1MDAwKSwgdGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgLnN1YnNjcmliZSgobmV3VmFsdWU6IE1JTk1BWCkgPT4ge1xuICAgICAgICB0aGlzLm9uVmFsdWVDaGFuZ2VkLmVtaXQobmV3VmFsdWUpO1xuICAgICAgfSk7XG4gICAgc2xpZGVyVmFsdWVDaGFuZ2VzJC5uZXh0KHZhbHVlKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgbmdPbkRlc3Ryb3kgZnVuY3Rpb24gaW4gVHlwZVNjcmlwdCBpcyB1c2VkIHRvIGNsZWFuIHVwIHJlc291cmNlcyBhbmQgdW5zdWJzY3JpYmUgZnJvbVxuICAgKiBvYnNlcnZhYmxlcyBieSBjb21wbGV0aW5nIGEgc3ViamVjdC5cbiAgICovXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxufVxuIl19

package/esm2022/public-api.mjs

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of rm-range-slider
+ */
+export * from './lib/rm-range-slider.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3JtLXJhbmdlLXNsaWRlci9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsaUNBQWlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHJtLXJhbmdlLXNsaWRlclxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3JtLXJhbmdlLXNsaWRlci5jb21wb25lbnQnO1xuIl19

package/{esm2020 → esm2022}/rm-range-slider.mjs

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm0tcmFuZ2Utc2xpZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvcm0tcmFuZ2Utc2xpZGVyL3NyYy9ybS1yYW5nZS1zbGlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/fesm2022/rm-range-slider.mjs

@@ -0,0 +1,151 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, numberAttribute, Component, Input, Output } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import { Subject, throttleTime, takeUntil } from 'rxjs';
+
+class RmRangeSliderComponent {
+    constructor() {
+        this.destroy$ = new Subject();
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case: */
+        this.startValue = 0;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
+      being defined as an input property with the following configuration: */
+        this.endValue = 10;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
+      defined as an input property with the following configuration: */
+        this.min = 0;
+        /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
+      `RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
+      defined as an input property with the following configuration: */
+        this.max = 100;
+        /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
+      the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
+      is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
+        this.onValueChanged = new EventEmitter();
+    }
+    /**
+     * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
+     * calls the `onSliderChange` function with this value.
+     */
+    onSliderInput() {
+        const value = {
+            from: this.startValue,
+            to: this.endValue,
+        };
+        this.onSliderChange(value);
+    }
+    /**
+     * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
+     * hundredth and appending a 'k' if the value is greater than or equal to 1000.
+     * @param {number} value - The `value` parameter is a number that represents a numerical value which
+     * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
+     * string representation of the number. If the value is greater than or equal to 1000, it will be
+     * rounded and displayed in
+     * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
+     * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
+     */
+    formatLabel(value) {
+        if (value >= 1000) {
+            return Math.round(value / 100) + 'k';
+        }
+        return `${value}`;
+    }
+    /**
+     * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
+     * throttle time of 5000 milliseconds.
+     * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
+     * value of the slider, which is of type `MINMAX`.
+     */
+    onSliderChange(value) {
+        this.destroy$.next();
+        this.destroy$.complete();
+        const sliderValueChanges$ = new Subject();
+        sliderValueChanges$
+            .pipe(throttleTime(5000), takeUntil(this.destroy$))
+            .subscribe((newValue) => {
+            this.onValueChanged.emit(newValue);
+        });
+        sliderValueChanges$.next(value);
+    }
+    /**
+     * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
+     * observables by completing a subject.
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.2", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
+    <mat-slider
+      [min]="this.min"
+      [max]="this.max"
+      showTickMarks
+      discrete
+      [displayWith]="formatLabel"
+      (change)="onSliderInput()"
+    >
+      <input matSliderStartThumb [(ngModel)]="startValue" />
+      <input matSliderEndThumb [(ngModel)]="endValue" />
+    </mat-slider>
+  `, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
+    <mat-slider
+      [min]="this.min"
+      [max]="this.max"
+      showTickMarks
+      discrete
+      [displayWith]="formatLabel"
+      (change)="onSliderInput()"
+    >
+      <input matSliderStartThumb [(ngModel)]="startValue" />
+      <input matSliderEndThumb [(ngModel)]="endValue" />
+    </mat-slider>
+  `, styles: ["mat-slider{width:100%}\n"] }]
+        }], propDecorators: { startValue: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], endValue: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], min: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], max: [{
+                type: Input,
+                args: [{
+                        required: true,
+                        transform: numberAttribute,
+                    }]
+            }], onValueChanged: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of rm-range-slider
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RmRangeSliderComponent };
+//# sourceMappingURL=rm-range-slider.mjs.map

package/fesm2022/rm-range-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rm-range-slider.mjs","sources":["../../../projects/rm-range-slider/src/lib/rm-range-slider.component.ts","../../../projects/rm-range-slider/src/public-api.ts","../../../projects/rm-range-slider/src/rm-range-slider.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  numberAttribute,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { Subject, takeUntil, throttleTime } from 'rxjs';\nexport interface MINMAX {\n  from: number;\n  to: number;\n}\n\n@Component({\n  selector: 'rm-range-slider',\n  standalone: true,\n  imports: [MatSliderModule, FormsModule],\n  template: `\n    <mat-slider\n      [min]=\"this.min\"\n      [max]=\"this.max\"\n      showTickMarks\n      discrete\n      [displayWith]=\"formatLabel\"\n      (change)=\"onSliderInput()\"\n    >\n      <input matSliderStartThumb [(ngModel)]=\"startValue\" />\n      <input matSliderEndThumb [(ngModel)]=\"endValue\" />\n    </mat-slider>\n  `,\n  styles: `\n    mat-slider {\n      width: 100%;\n    }\n  `,\n})\nexport class RmRangeSliderComponent implements OnDestroy {\n  private destroy$ = new Subject<void>();\n\n  /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\n`RmRangeSliderComponent` component in Angular. In this specific case: */\n  @Input({\n    required: true,\n    transform: numberAttribute,\n  })\n  startValue: number = 0;\n\n  /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\n`RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is\nbeing defined as an input property with the following configuration: */\n  @Input({\n    required: true,\n    transform: numberAttribute,\n  })\n  endValue: number = 10;\n\n  /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\n`RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being\ndefined as an input property with the following configuration: */\n  @Input({\n    required: true,\n    transform: numberAttribute,\n  })\n  min: number = 0;\n\n  /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\n`RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being\ndefined as an input property with the following configuration: */\n  @Input({\n    required: true,\n    transform: numberAttribute,\n  })\n  max: number = 100;\n\n  /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for\nthe `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property\nis being defined as an output property with the type of `EventEmitter<MINMAX>`. */\n  @Output()\n  public onValueChanged = new EventEmitter<MINMAX>();\n\n  /**\n   * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and\n   * calls the `onSliderChange` function with this value.\n   */\n  onSliderInput(): void {\n    const value: MINMAX = {\n      from: this.startValue,\n      to: this.endValue,\n    };\n    this.onSliderChange(value);\n  }\n\n  /**\n   * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest\n   * hundredth and appending a 'k' if the value is greater than or equal to 1000.\n   * @param {number} value - The `value` parameter is a number that represents a numerical value which\n   * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted\n   * string representation of the number. If the value is greater than or equal to 1000, it will be\n   * rounded and displayed in\n   * @returns If the `value` is greater than or equal to 1000, the function will return the value divided\n   * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.\n   */\n\n  formatLabel(value: number): string {\n    if (value >= 1000) {\n      return Math.round(value / 100) + 'k';\n    }\n    return `${value}`;\n  }\n\n  /**\n   * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a\n   * throttle time of 5000 milliseconds.\n   * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current\n   * value of the slider, which is of type `MINMAX`.\n   */\n  onSliderChange(value: MINMAX): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n    const sliderValueChanges$ = new Subject<MINMAX>();\n    sliderValueChanges$\n      .pipe(throttleTime(5000), takeUntil(this.destroy$))\n      .subscribe((newValue: MINMAX) => {\n        this.onValueChanged.emit(newValue);\n      });\n    sliderValueChanges$.next(value);\n  }\n\n  /**\n   * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from\n   * observables by completing a subject.\n   */\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n}\n","/*\n * Public API Surface of rm-range-slider\n */\n\nexport * from './lib/rm-range-slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="rm-range-slider" />
-export * from './public-api';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="rm-range-slider" />
+export * from './public-api';

package/lib/rm-range-slider.component.d.ts

@@ -1,82 +1,48 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnInit, Renderer2, SimpleChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { MINMAX } from './rm-range-slider.component.interface';
-import * as i0 from "@angular/core";
-export declare class RmRangeSliderComponent implements OnInit, AfterViewInit {
-    #private;
-    private readonly fb;
-    private renderer;
-    slider: FormGroup;
-    min: number;
-    max: number;
-    setMinValue: number;
-    disabled: boolean;
-    showToolTip: boolean;
-    setMaxValue: number;
-    showScale: boolean;
-    doubleSlider: boolean;
-    toolTipColor: string;
-    toolTipColorHover: string;
-    toolTipColorHoverShadow: string;
-    rangeColor: string;
-    sliderColor: string;
-    sliderColorRight: string;
-    onValueChanged: EventEmitter<MINMAX>;
-    toSliders: ElementRef;
-    fromSlider: ElementRef;
-    toSliderToolTip: ElementRef;
-    fromSliderToolTip: ElementRef;
-    private gradient;
-    private destroyed$;
-    /**
-     * The constructor function is a special function that is called when a new instance of the class is created
-     * @param {FormBuilder} fb - FormBuilder - This is the FormBuilder service that we'll use to create our form.
-     * @param {Renderer2} renderer - Renderer2 - This is the Angular Renderer2 service. It's used to manipulate the DOM.
-     */
-    constructor(fb: FormBuilder, renderer: Renderer2);
-    /**
-     * It creates a form.
-     */
-    ngOnInit(): void;
-    /**
-     * A lifecycle hook that is called after a component's view has been fully initialized.
-     */
-    ngAfterViewInit(): void;
-    /**
-     * When the component is destroyed, we want to complete the observable and let any subscribers know that the observable is
-     * complete.
-     */
-    ngOnDestroy(): void;
-    /**
-     * If the changes object has a property called disabled and it's not the first change and the current value is true, then
-     * call the #disabledSlider function with the current value of the disabled property
-     * @param {SimpleChanges} changes - SimpleChanges - this is the object that contains the changes that have been made to
-     * the component.
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * It's a function that takes a string as an argument and if the showToolTip property is true, it calls the
-     * fromSliderToolTipPosition() or toSliderToolTipPosition() function depending on the value of the string argument
-     * @param {string} slideType - string - This is the type of slider that is being moved. It can be either 'from' or 'to'.
-     */
-    fireEventOnInput(slideType: string): void;
-    /**
-     * We're calculating the position of the tooltip based on the value of the slider
-     */
-    fromSliderToolTipPosition(): void;
-    /**
-     * The function takes the value of the toSlider and converts it to a percentage value that is used to position the
-     * toSliderToolTip
-     */
-    /**
-     * The function takes the value of the toSlider and converts it to a percentage value that is used to position the
-     * toSliderToolTip
-     */
-    toSliderToolTipPosition(): void;
-    /**
-     * We're getting the values of the two sliders, and then emitting an event with those values
-     */
-    fireEventOnChange(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "min": "SliderMinRange"; "max": "SliderMaxRange"; "setMinValue": "setMinValue"; "disabled": "disabled"; "showToolTip": "showToolTip"; "setMaxValue": "setMaxValue"; "showScale": "showScale"; "doubleSlider": "doubleSlider"; "toolTipColor": "toolTipColor"; "toolTipColorHover": "toolTipColorHover"; "toolTipColorHoverShadow": "toolTipColorHoverShadow"; "rangeColor": "rangeColor"; "sliderColor": "sliderColor"; "sliderColorRight": "sliderColorRight"; }, { "onValueChanged": "onValueChanged"; }, never, never, false>;
-}
+import { EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MINMAX {
+    from: number;
+    to: number;
+}
+export declare class RmRangeSliderComponent implements OnDestroy {
+    private destroy$;
+    startValue: number;
+    endValue: number;
+    min: number;
+    max: number;
+    onValueChanged: EventEmitter<MINMAX>;
+    /**
+     * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
+     * calls the `onSliderChange` function with this value.
+     */
+    onSliderInput(): void;
+    /**
+     * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
+     * hundredth and appending a 'k' if the value is greater than or equal to 1000.
+     * @param {number} value - The `value` parameter is a number that represents a numerical value which
+     * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
+     * string representation of the number. If the value is greater than or equal to 1000, it will be
+     * rounded and displayed in
+     * @returns If the `value` is greater than or equal to 1000, the function will return the value divided
+     * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
+     */
+    formatLabel(value: number): string;
+    /**
+     * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
+     * throttle time of 5000 milliseconds.
+     * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
+     * value of the slider, which is of type `MINMAX`.
+     */
+    onSliderChange(value: MINMAX): void;
+    /**
+     * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
+     * observables by completing a subject.
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "startValue": { "alias": "startValue"; "required": true; }; "endValue": { "alias": "endValue"; "required": true; }; "min": { "alias": "min"; "required": true; }; "max": { "alias": "max"; "required": true; }; }, { "onValueChanged": "onValueChanged"; }, never, never, true, never>;
+    static ngAcceptInputType_startValue: unknown;
+    static ngAcceptInputType_endValue: unknown;
+    static ngAcceptInputType_min: unknown;
+    static ngAcceptInputType_max: unknown;
+}