Angular Zoom Slider Overview

The Angular ZoomSlider control provides zooming functionality to range-enabled controls. The ZoomSlider features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. The ZoomSlider cannot work as a standalone control and it acts as an enhancement for range-based controls like the DataChart or CategoryChart.

Angular Zoom Slider Example

The following sample demonstrates how to use IgxZoomSliderComponent to navigate content in IgxDataChartComponent.

Usage

Feature Name	Description
Scrollbar navigation	Users can change scale and scroll through ranges of data using the built-in capabilities of the ZoomSlider scrollbar.
Panning and zooming	Users can adjust the display scale by dragging the edges of the thumb pad to either make the current display cover a larger range (zoom out) or a smaller range (zoom in).
Multiple user interaction options	All mouse user interactions are redundantly supported through touch and most of them – through the keyboard. For details, see User Interactions and Usability.
Touch support	On touch-enabled devices, users can enjoy the full ZoomSlider functionality. All mouse interactions are supported in touch environment.
Extensibility	The ZoomSlider control supports DataChart control out-of the box.
Configurable zoom-range window	The initial zoom-range window width and position, as well as its minimum size, are configurable.

Dependencies

When installing the Angular chart component, the core package must also be installed.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts

Component Modules

The IgxZoomSliderComponent requires the following modules:

import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxZoomSliderModule,
        // ...
    ]
})
export class AppModule {}

Code Snippet

The following code demonstrates how to setup the ZoomSlider.

<igx-zoom-slider
  width="100%"
  height="150px">
</igx-zoom-slider>

Additional Resources

You can find more information about charts in Chart Features topic.

API References

The following is a list of API members mentioned in the above sections:

• IgxZoomSliderComponent
• IgxDataChartComponent