@angular/material/slider#MatSliderModule TypeScript Examples

@NgModule({
  declarations: [
    AppComponent,
    BlogListComponent,
    AddBlogComponent,
    NavbarComponent,
    WelcomePageComponent,
    ViewBlogComponent,
    UpdateBlogComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
    MatToolbarModule,
    MatSliderModule,
    MatMenuModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  exports: [
    MatSelectModule,
    MatAutocompleteModule,
    MatCardModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatRadioModule,
    MatInputModule,
    MatRippleModule,
    MatDividerModule,
    MatExpansionModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatBadgeModule
  ]
})
export class MaterialComponentsModule {}

@NgModule({
  declarations: [
    AppComponent,
    DashComponent,
    AboutComponent,
    ToolbarComponent,
    FooterComponent,
    LogoComponent,
    CardComponent,
    DonateComponent,
    DebugComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatCardModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
    FormsModule,
    MatTooltipModule,
    MatIconModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  declarations: [
    AppComponent,
    CasesComponent,
    CasesDetailsComponent,
    AddCasesComponent,
    EditCasesComponent,
    CasesStatComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatTableModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatButtonToggleModule,
    MatSelectModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  exports: [
    ColorPickerModule,
    CdkTableModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatCheckboxModule,
    MatInputModule,
    MatIconModule,
    MatTableModule,
    MatPaginatorModule,
    MatRippleModule,
    MatSortModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSelectModule,
    MatSnackBarModule,
    MatTooltipModule
  ]
})
export class MaterialModule {}

modules = [
  MatCheckboxModule,
  MatButtonModule,
  MatInputModule,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatFormFieldModule,
  MatRadioModule,
  MatSelectModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatMenuModule,
  MatSidenavModule,
  MatToolbarModule,
  MatListModule,
  MatGridListModule,
  MatCardModule,
  MatStepperModule,
  MatTabsModule,
  MatExpansionModule,
  MatButtonToggleModule,
  MatChipsModule,
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatDialogModule,
  MatTooltipModule,
  MatSnackBarModule,
  MatTableModule,
  MatSortModule,
  MatPaginatorModule,
  MatBadgeModule,
  MatBottomSheetModule,
]

/** A topology graph view module. */
@NgModule({
  declarations: [TopologyGraph],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatSliderModule,
  ],
  exports: [TopologyGraph]
})
export class TopologyGraphModule {
}

/** A pod viewer module. */
@NgModule({
  declarations: [PodViewer],
  imports: [
    CommonModule,
    DiagnosticsViewModule,
    MatDividerModule,
    MatSliderModule,
    StackBarChartModule,
    TopologyGraphModule,
  ],
  exports: [PodViewer]
})
export class PodViewerModule {
}

modules = [
  MatToolbarModule,
  MatButtonModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatSliderModule,
  MatSidenavModule,
  MatIconModule,
  MatDialogModule,
  MatCardModule,
  MatInputModule,
  MatTooltipModule,
  MatTabsModule,
  MatSelectModule,
  MatFormFieldModule,

  ScrollingModule,
]

/** An op profile module. */
@NgModule({
  declarations: [OpProfile],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
    MatSlideToggleModule,
    OpTableModule,
    MatIconModule,
    MatTooltipModule,
  ],
  exports: [OpProfile]
})
export class OpProfileModule {
}

@NgModule({
  declarations: [KernelStatsChart],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
  ],
  exports: [KernelStatsChart]
})
export class KernelStatsChartModule {
}

@NgModule({
  declarations: [

    QDMessagesComponent,
    ChannelComponent,
    MatMenuComponent,

    FsIconComponent,
    ChannelListComponent,
    ChannelSidebarRightComponent,
    ChannelSidebarLeftComponent,
    ChannelParticipantListComponent,
    ChannelSettingsComponent,
    ChannelTabComponent,
    ChannelFavoritesComponent
  ],
  imports: [
  NbSidebarModule,
    CdkTableModule,
    CdkTreeModule,
    NbMenuModule,
    ClipboardModule,
    HttpClientModule,
    MatCardModule,
    MatSelectModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    CommonModule,
    QuestMessengerJSRoutingModule,
    FontAwesomeModule,
    NbThemeModule,
    NbLayoutModule,
    NbChatModule,
    NbTabsetModule,
    NbEvaIconsModule,
    NbIconModule,
    FormsModule,
    NbContextMenuModule,
    NbDialogModule.forRoot(),
    NbCardModule,
    MatTreeModule,
    DragDropModule,
    MatButtonModule,
   MatCheckboxModule,
   MatInputModule,
   MatFormFieldModule,
   ZXingScannerModule,
   MatSliderModule,
   FlexLayoutModule,
   MatIconModule,
   LinkyModule


  ],
  exports: [
    QDMessagesComponent,
    CdkTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatTreeModule,
    MatMenuModule,
    ],
  providers: [
  NbDialogService
  ],
  bootstrap: [QDMessagesComponent]
})
export class QDMessagesModule { }

@NgModule({
  imports: [
    CommonModule,


    // Navigation
    MatMenuModule, MatSidenavModule, MatToolbarModule,

    // FormControls
    MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, MatInputModule,
    MatFormFieldModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatSlideToggleModule, MatSelectModule,
    // Layout
    MatCardModule, MatDividerModule, MatExpansionModule, MatGridListModule,
    MatListModule, MatStepperModule, MatTabsModule, MatTreeModule,
    // Buttons
    MatButtonModule, MatButtonToggleModule, MatBadgeModule, MatChipsModule,
    MatIconModule, MatProgressSpinnerModule, MatProgressBarModule, MatRippleModule,

    // Popups & Modals
    MatBottomSheetModule, MatDialogModule, MatSnackBarModule, MatTooltipModule,

    // Datatable
    MatTableModule, MatSortModule, MatPaginatorModule,

    FlexGridModule
  ],
  exports: [
    // CommonModule,

    // // Navigation
    // MatMenuModule, MatSidenavModule, MatToolbarModule,

    // // FormControls
    // MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, 
    MatInputModule,
    MatFormFieldModule, // MatRadioModule, MatSelectModule, MatSliderModule,
    // MatSlideToggleModule, MatSelectModule,
    // // Layout
    MatCardModule,
    MatDividerModule,
    // MatExpansionModule, MatGridListModule,
    // MatListModule, MatStepperModule, MatTabsModule, MatTreeModule,
    // Buttons
    MatButtonModule,
    // MatButtonToggleModule,
    MatBadgeModule, MatChipsModule,
    //
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule, MatRippleModule,

    // Popups & Modals
    // MatBottomSheetModule, MatDialogModule, MatSnackBarModule, 
    MatTooltipModule,

    // Datatable
    MatTableModule, MatSortModule, MatPaginatorModule,

    FlexGridModule

  ],
  declarations: []
})
export class SharedModule { }

@NgModule({
  exports: [
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatNativeDateModule,
    MatMomentDateModule,
    MatTreeModule,
    MatRippleModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatDividerModule
  ]
})
export class SharedMaterialModule {}

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/** A range slider component module. */
@NgModule({
  declarations: [RangeSlider],
  imports: [MatSliderModule],
  exports: [RangeSlider]
})
export class RangeSliderModule {
}

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}

@NgModule({
  imports: [
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatBottomSheetModule,
    MatBadgeModule,
    MatRippleModule,
  ],
  exports: [
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatBottomSheetModule,
    MatBadgeModule,
  ],
})
export class MaterialModule {}

@NgModule({
  declarations: [DxcSliderComponent],
  imports: [CommonModule, MatSliderModule, FormsModule, DxcTextInputModule],
  exports: [DxcSliderComponent],
})
export class DxcSliderModule {}

@NgModule({
  declarations: [
    AppComponent,
    ExpandableComponent,
    CanvasComponent,
    OpenComponent,
    OpenDialogComponent,
    SaveComponent,
    SaveDialogComponent,
    ExportComponent,
    ExportDialogComponent,
    UploadImageComponent,
    UploadImageDialogComponent,
    FormatterDirective,
    KeyboardNavigableDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatCheckboxModule,
    MatMenuModule,
    MatTooltipModule,
    MatDialogModule,
    MatTableModule,
    MatSortModule,
    MatSliderModule,
    BrowserAnimationsModule,
    ScrollingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [{
    provide: MAT_TOOLTIP_SCROLL_STRATEGY,
    deps: [Overlay],
    useFactory(overlay: Overlay): () => ScrollStrategy {
      return () => overlay.scrollStrategies.close();
    }
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({
  exports: [
    MatSliderModule,
    MatTabsModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatInputModule,
    MatIconModule,
    MatSlideToggleModule,
    MatProgressBarModule,
    MatCheckboxModule,
    MatDividerModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatRadioModule,
    MatTooltipModule,
    MatDialogModule,
    MatCardModule,
    MatSnackBarModule,
    MatSidenavModule,
    MatListModule,
    MatBadgeModule,
    ClipboardModule,
    ScrollingModule,
    MatGridListModule,
    MatExpansionModule,
  ],
  imports: [
    MatSliderModule,
    MatTabsModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatInputModule,
    MatIconModule,
    MatSlideToggleModule,
    MatProgressBarModule,
    MatCheckboxModule,
    MatDividerModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatRadioModule,
    MatTooltipModule,
    MatDialogModule,
    MatCardModule,
    MatSnackBarModule,
    MatSidenavModule,
    MatListModule,
    MatBadgeModule,
    ClipboardModule,
    ScrollingModule,
    MatGridListModule,
    MatExpansionModule,
  ],
})
export class MatModule {}

@NgModule({
  imports: [
    CommonModule,
    FormsModule,

    TranslateModule,

    MatButtonModule,
    MatSelectModule,
    MatTabsModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatCardModule,
    MatCheckboxModule,
    MatListModule,
    MatMenuModule,
    MatIconModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatDividerModule,

    FontAwesomeModule
  ],
  declarations: [
    BigInputComponent,
    BigInputActionComponent,
    RtlSupportDirective
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    TranslateModule,

    MatButtonModule,
    MatMenuModule,
    MatTabsModule,
    MatChipsModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatCheckboxModule,
    MatCardModule,
    MatListModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatDividerModule,
    MatSliderModule,
    MatDatepickerModule,
    MatNativeDateModule,

    FontAwesomeModule,

    BigInputComponent,
    BigInputActionComponent,
    RtlSupportDirective
  ]
})
export class SharedModule {
  constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }
}

@NgModule({
  declarations: [
    AppComponent,
    RepoSearchComponent,
    DialogDetails,
    DialogAddCustom,
    HeaderComponent,
    CodeViewComponent,
    CanvasComponent,
    HomeComponent,
    ManageProjectDialogComponent,
    ManageVolumesDialogComponent,
    SpinnerComponent,
    CheckCircleComponent,
    ConfirmDialogComponent,
    NodeComponent,
    MarkedPipe,
    TruncateTextPipe,
    KeyValueComponent,
    ManageNetworksDialogComponent,
    SideBarComponent,
    LoginComponent,
    RegistrationComponent,
    ManageUserDialogComponent,
    CallbackComponent,
    ImportDialogComponent,
    GlobalDialogComponent,
    RecipeComponent,
    DialogPublishRecipe,
    DialogRecipeDetails,
    BuildDialogComponent,
    DeployDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatSelectModule,
    MatTabsModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatSliderModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatMenuModule,
    MatStepperModule,
    MatAutocompleteModule,
    DragDropModule,
    HighlightModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    StoreModule.forRoot({ project: projectReducer, globalSpinnerState: globalSpinnerReducer, globalError: globalDialogReducer, globalAppConfiguration: globalConfigurationReducer }),
    ClipboardModule,
    EffectsModule.forRoot([ProjectEffects]),
    AngularSplitModule.forRoot(),
    CodemirrorModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: <HighlightOptions>{
        lineNumbers: true,
        languages: getHighlightLanguages(),
      }
    },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    EventEmitterService,
    NodeService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

describe("DxcSlider tests", () => {
  test("should render dxc-slider", async () => {
    const { getByText } = await render(DxcSliderComponent, {
      componentProperties: { showLimitsValues: true },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    expect(getByText("100")).toBeTruthy();
  });

  test("Uncontrolled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
  });

  test("Uncontrolled dxc-slider with default value", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
        defaultValue: 10,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    expect(input.value).toBe("10");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
    expect(input.value).toBe("22");
  });

  test("Controlled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
  });

  test("Disabled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const onDragEndFunction = jest.fn();
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        onDragEnd: { emit: onDragEndFunction } as any,
        showInput: true,
        disabled: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    fireEvent.click(input);
    slider.detectChanges();
    expect(onChangeFunction).not.toHaveBeenCalledWith("");
    input.hasAttribute("disabled");
    expect(input.value).toBe("45");

    const sliderElement = <HTMLInputElement>slider.getByRole("slider");
    fireEvent.mouseUp(sliderElement);
    expect(onChangeFunction).not.toHaveBeenCalled();
  });

  test("DragEnd dxc-slider", async () => {
    const onDragEndFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onDragEnd: { emit: onDragEndFunction } as any,
        showInput: true,
        disabled: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("slider");
    fireEvent.mouseUp(input);
    expect(onDragEndFunction).toHaveBeenCalled();
  });
});

@NgModule({
    imports: [
        CdkTableModule,
        CdkTreeModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        ClipboardModule],
    exports: [CdkTableModule,
        CdkTreeModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        ClipboardModule],
})
export class MaterialModule {

}