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 ZoomSlider to navigate content in DataChart.
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-chartsComponent Modules
The ZoomSlider 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.