Web Components Zoom Slider Overview

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

    Web Components Zoom Slider Example

    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 Web Components chart component, the core package must also be installed.

    npm install --save igniteui-webcomponents-core
    npm install --save igniteui-webcomponents-charts
    

    Required Modules

    The IgcZoomSliderComponent requires the following modules:

    import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
    import { IgcZoomSliderComponent } from "igniteui-webcomponents-charts";
    
    IgcZoomSliderModule.register();
    

    Code Snippet

    The following code demonstrates how to setup the ZoomSlider.

      <igc-zoom-slider
          name="zoomSlider"
          width="100%"
          height="160px" >
      </igc-zoom-slider>