Add demo app for cancellation of handle movement on page scroll

src/demo-app/app/app-router.config.ts

@@ -10,6 +10,7 @@ import {
   LimitedRangeSliderComponent,
   LimitedSliderComponent,
   NoSwitchingRangeSliderComponent,
+  PreventChangeOnScrollSliderComponent,
   PushRangeSliderComponent,
   RangeSliderComponent,
   ReactiveFormRangeSliderComponent,
@@ -34,6 +35,7 @@ export const routerConfig: Routes = [
   { path: 'limited-range-slider', component: LimitedRangeSliderComponent },
   { path: 'limited-slider', component: LimitedSliderComponent },
   { path: 'no-switching-range-slider', component: NoSwitchingRangeSliderComponent },
+  { path: 'prevent-change-on-scroll-slider', component: PreventChangeOnScrollSliderComponent },
   { path: 'push-range-slider', component: PushRangeSliderComponent },
   { path: 'range-slider', component: RangeSliderComponent },
   { path: 'reactive-form-range-slider', component: ReactiveFormRangeSliderComponent },

src/demo-app/app/app.module.ts

@@ -38,6 +38,7 @@ import {
   LogScaleSliderComponent,
   ManualRefreshSliderComponent,
   NoSwitchingRangeSliderComponent,
+  PreventChangeOnScrollSliderComponent,
   PushRangeSliderComponent,
   RangeSliderComponent,
   ReactiveFormRangeSliderComponent,
@@ -96,6 +97,7 @@ import { routerConfig, routerOptions } from './app-router.config';
     LogScaleSliderComponent,
     ManualRefreshSliderComponent,
     NoSwitchingRangeSliderComponent,
+    PreventChangeOnScrollSliderComponent,
     PushRangeSliderComponent,
     RangeSliderComponent,
     ReactiveFormRangeSliderComponent,

src/demo-app/app/demos.component.html

@@ -9,6 +9,7 @@
   <app-limited-slider></app-limited-slider>
   <app-limited-range-slider></app-limited-range-slider>
   <app-no-switching-range-slider></app-no-switching-range-slider>
+  <app-prevent-change-on-scroll-slider></app-prevent-change-on-scroll-slider>
   <app-push-range-slider></app-push-range-slider>
   <app-selection-bar-slider></app-selection-bar-slider>
   <app-selection-bar-at-end-slider></app-selection-bar-at-end-slider>

src/demo-app/app/snippets/index.ts

@@ -25,6 +25,7 @@ export * from './limited-slider/limited-slider.component';
 export * from './log-scale-slider/log-scale-slider.component';
 export * from './manual-refresh-slider/manual-refresh-slider.component';
 export * from './no-switching-range-slider/no-switching-range-slider.component';
+export * from './prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component';
 export * from './push-range-slider/push-range-slider.component';
 export * from './range-slider/range-slider.component';
 export * from './reactive-form-range-slider/reactive-form-range-slider.component';

src/demo-app/app/snippets/prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component.id-template.html

@@ -0,0 +1 @@
+prevent-change-on-scroll-slider

src/demo-app/app/snippets/prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component.template.html

@@ -0,0 +1,2 @@
+<p>Value: <input type="number" [(ngModel)]="value"></p>
+<ngx-slider [(value)]="value" [options]="options" [cancelHandleMovement]="emitOnScroll"></ngx-slider>

src/demo-app/app/snippets/prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component.title-template.html

@@ -0,0 +1 @@
+Prevent change on page scroll slider

src/demo-app/app/snippets/prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component.ts

@@ -0,0 +1,20 @@
+import { Component, HostListener, EventEmitter } from '@angular/core';
+import { Options } from '@local/ngx-slider';
+
+@Component({
+  selector: 'app-prevent-change-on-scroll-slider',
+  templateUrl: './prevent-change-on-scroll-slider.component.html'
+})
+export class PreventChangeOnScrollSliderComponent {
+  value: number = 100;
+  options: Options = {
+    floor: 0,
+    ceil: 250
+  };
+  emitOnScroll: EventEmitter<void> = new EventEmitter<void>;
+
+  @HostListener('window:scroll', ['$event'])
+  public onScroll(event: any): void {
+    this.emitOnScroll.emit();
+  }
+}