Merge pull request #3236 from 4Science/task/main/CST-15589

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html

@@ -8,7 +8,7 @@
                     {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
                   </span>
                   <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
-                         class="form-control" (blur)="onSubmit()"
+                         class="form-control"
                          [attr.aria-label]="minLabel"
                          [placeholder]="minLabel"
                   />
@@ -20,7 +20,7 @@
                       {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
                     </span>
                     <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
-                           class="form-control" (blur)="onSubmit()"
+                           class="form-control"
                            [attr.aria-label]="maxLabel"
                            [placeholder]="maxLabel"
                     />
@@ -33,7 +33,8 @@
 
         <ng-container *ngIf="shouldShowSlider()">
             <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
-                        [dsDebounce]="250" (onDebounce)="onSubmit()"
+                        [dsDebounce]="250"
+                        (change)="onSliderChange($event)"
                         (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
                         [(ngModel)]="range" ngDefaultControl>
             </nouislider>
@@ -43,5 +44,8 @@
           <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
           </div>
         </ng-container>
+        <button (click)="onSubmit()" class="btn btn-primary">
+          {{'search.filters.search.submit' | translate}}
+        </button>
     </div>
 </div>

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts

@@ -91,6 +91,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
    */
   range: [number | undefined, number | undefined];
 
+  /**
+   * The range currently selected by the slider
+   */
+  sliderRange: [number | undefined, number | undefined];
+
   /**
    * Whether the sider is being controlled by the keyboard.
    * Supresses any changes until the key is released.
@@ -145,6 +150,15 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
     };
   }
 
+  /**
+   * Updates the sliderRange property with the current slider range.
+   * This method is called whenever the slider value changes, but it does not immediately apply the changes.
+   * @param range - The current range selected by the slider
+   */
+  onSliderChange(range: [number | undefined, number | undefined]): void {
+    this.sliderRange = range;
+  }
+
   /**
    * Submits new custom range values to the range filter from the widget
    */
@@ -182,5 +196,4 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
   shouldShowSlider(): boolean {
     return isPlatformBrowser(this.platformId);
   }
-
 }