igx-slider doesn't slide the thumbs/update values while interacting with the mouse

[punker76]

Description

The range slider doesn't slide the thumbs and doesn't trigger the value change event during interaction with the mouse.

I use Nx v17 together with Angular v17 and standalone components https://nx.dev/getting-started/tutorials/angular-standalone-tutorial

I also imported the HammerModule and hammerjs.

• igniteui-angular version: 17.0.11
• browser: all common

Steps to reproduce

I used the sample from the documentation: https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider

Here is my application source: igniteui-slider.zip

Result

The slider doesn't slide with the mouse gesture.

Expected result

It should be slide.

Attachments

https://github.com/IgniteUI/igniteui-angular/assets/658431/c0943701-9ac8-499c-abb6-62c218999434

Here is the component from my sample:

import { Component, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HammerModule } from '@angular/platform-browser';
import {
  IGX_INPUT_GROUP_DIRECTIVES,
  IGX_SLIDER_DIRECTIVES,
  IgxSliderType,
} from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'igniteui-nx-welcome',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    IGX_SLIDER_DIRECTIVES,
    IGX_INPUT_GROUP_DIRECTIVES,
    HammerModule,
  ],
  template: `
    <div class="container">
      <igx-slider
        id="slider"
        [type]="sliderType.RANGE"
        [minValue]="0"
        [maxValue]="1000"
        [(lowerValue)]="priceRange.lower"
        [(upperValue)]="priceRange.upper"
      ></igx-slider>

      <div class="row-container">
        <igx-input-group type="border">
          <label igxLabel for="lowerRange"
            >Lowest price (updates on blur):</label
          >
          <igx-prefix>$</igx-prefix>
          <input
            igxInput
            id="lowerRange"
            type="number"
            min="0"
            [max]="priceRange.upper"
            [(ngModel)]="priceRange.lower"
            [ngModelOptions]="{ updateOn: 'blur' }"
          />
        </igx-input-group>

        <igx-input-group type="border">
          <label igxLabel for="upperRange"
            >Highest price (updates on blur):</label
          >
          <igx-prefix>$</igx-prefix>
          <input
            igxInput
            id="upperRange"
            type="number"
            [min]="priceRange.lower"
            max="1000"
            [(ngModel)]="priceRange.upper"
            [ngModelOptions]="{ updateOn: 'blur' }"
          />
        </igx-input-group>
      </div>
    </div>
  `,
  styles: [
    `
      .container {
        margin: 55px 20px;
        min-width: 200px;
      }

      .row-container {
        display: grid;
        column-gap: 12px;
        grid-template-columns: 50% 50%;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
export class NxWelcomeComponent {
  public sliderType = IgxSliderType;
  public priceRange = {
    lower: 200,
    upper: 800,
  };
}

[PlamenD95]

Hello @punker76,

Apologies for the delay in answering.

The reason for the issue with slider interactions that you are experiencing lies with the place where the HammerModule is imported.

Because of the use of standalone components in the sample provided by you, the HammerModule should actually be imported only in the app.config.ts, instead of the app.module.ts or the app.component.ts files:

// app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { HammerModule } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HammerModule),
    provideRouter(appRoutes)
  ],
};

Unfortunately, this has not been stated in the Angular Slider Component Overview page until now. I'm taking steps to update the documentation page.

I'm attaching an updated version of your application source: igniteui-slider.zip

I'm available in case of further questions.

Best regards

[punker76]

@PlamenD95 Thanks for the explanation and the reference to importProvidersFrom. I had already tried to import the module only in the app configuration, but did not use the importProvidersFrom. 👌