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

A highly optimized and fully customizable pure angular component for value range selection.

{"version":3,"file":"rm-ng-range-slider.mjs","sources":["../../projects/rm-ng-range-slider/src/lib/rm-ng-range-slider.component.ts","../../projects/rm-ng-range-slider/src/lib/rm-ng-range-slider.component.html","../../projects/rm-ng-range-slider/src/rm-ng-range-slider.ts"],"sourcesContent":["\r\n\r\nimport {AfterViewInit, Component, ElementRef, input, viewChild, output, signal, WritableSignal, Signal} from '@angular/core';\r\nimport {debounceTime, Subject} from 'rxjs';\r\n\r\n@Component({\r\n    selector: 'rm-ng-range-slider',\r\n    templateUrl: './rm-ng-range-slider.component.html',\r\n    imports: [],\r\n    styleUrls: ['./rm-ng-range-slider.component.scss']\r\n})\r\nexport class RmNgRangeSliderComponent implements AfterViewInit {\r\n  readonly min = input<number>(0);\r\n  readonly max = input<number>(100);\r\n  readonly leftColor = input<string>('#3498db'); // Default left color\r\n  readonly rightColor = input<string>('#e74c3c'); // Default right color\r\n  readonly leftTooltipColor = input<string>('#333'); // Default tooltip color for the left\r\n  readonly rightTooltipColor = input<string>('#e74c3c'); // Default tooltip color for the right\r\n  readonly lowSlider = viewChild.required<ElementRef<HTMLDivElement>>('lowSlider');\r\n  readonly rangeChanged = output<{\r\n    low: number;\r\n    high: number;\r\n}>();\r\n  lowValue:WritableSignal<number> = signal(25); // Default value for the left thumb\r\n  highValue:WritableSignal<number> = signal(75); // Default value for the right thumb\r\n  private rangeChangedSubject: Subject<{ low: number, high: number }> = new Subject<{ low: number, high: number }>();\r\n\r\n  ngAfterViewInit(): void {\r\n    this.updateSliderColors();\r\n    // Subscribe to the debounced range change subject\r\n    this.rangeChangedSubject.pipe(\r\n      debounceTime(300) // Adjust debounce time as needed\r\n    ).subscribe((range: { low: number, high: number }): void => {\r\n      this.rangeChanged.emit(range);\r\n    });\r\n  }\r\n\r\n  onLowThumbChange(event: Event): void {\r\n    let value: number = (event.target as HTMLInputElement).valueAsNumber;\r\n    // Ensure the new low value does not exceed the high value\r\n    if (value > this.highValue()) {\r\n      value = this.highValue();\r\n    }\r\n\r\n    this.lowValue.set(value);\r\n    this.emitRange();\r\n    this.updateSliderColors();\r\n  }\r\n\r\n  onHighThumbChange(event: Event): void {\r\n    let value: number = (event.target as HTMLInputElement).valueAsNumber;\r\n    // Ensure the new high value does not go below the low value\r\n    if (value < this.lowValue()) {\r\n      value = this.lowValue();\r\n    }\r\n\r\n    this.highValue.set(value);\r\n    this.emitRange();\r\n    this.updateSliderColors();\r\n  }\r\n\r\n  emitRange(): void {\r\n    this.rangeChangedSubject.next({low: this.lowValue(), high: this.highValue()});\r\n  }\r\n\r\n  updateSliderColors(): void {\r\n    const lowSlider = this.lowSlider().nativeElement;\r\n    const percentLow: number =\r\n      ((this.lowValue() - this.min()) / (this.max() - this.min())) * 100;\r\n    const percentHigh: number =\r\n      ((this.highValue() - this.min()) / (this.max() - this.min())) * 100;\r\n    lowSlider.style.background = `linear-gradient(to right, ${this.leftColor()} ${percentLow}%, ${this.rightColor()} ${percentHigh}%)`;\r\n  }\r\n}\r\n","<div class=\"slider-container\">\r\n  <input\r\n    #lowSlider\r\n    id=\"lowSlider\"\r\n    type=\"range\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [value]=\"lowValue()\"\r\n    (input)=\"onLowThumbChange($event)\"\r\n    class=\"thumb low low-thumb\"\r\n  />\r\n  <input\r\n    id=\"highSlider\"\r\n    type=\"range\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [value]=\"highValue()\"\r\n    (input)=\"onHighThumbChange($event)\"\r\n    class=\"thumb high high-thumb\"\r\n  />\r\n\r\n  <!-- Tooltip for the left thumb -->\r\n  <div\r\n    class=\"tooltip low-tooltip\"\r\n    [style.left.%]=\"(lowValue() - min()) / (max() - min()) * 100\"\r\n    [style.background]=\"leftTooltipColor()\">\r\n    {{ lowValue() }}\r\n  </div>\r\n\r\n  <!-- Tooltip for the right thumb -->\r\n  <div\r\n    class=\"tooltip high-tooltip\"\r\n    [style.left.%]=\"(highValue() - min()) / (max() - min()) * 100\"\r\n    [style.background]=\"rightTooltipColor()\">\r\n    {{ highValue() }}\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}