Zoom Slider

The 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.

Demo

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 chart package, 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>