React Zoom Slider Overview

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

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

    npm install --save igniteui-react-core
    npm install --save igniteui-react-charts
    

    Required Modules

    The IgrZoomSlider requires the following modules:

    import { IgrZoomSliderModule } from 'igniteui-react-charts';
    import { IgrZoomSlider } from 'igniteui-react-charts';
    
    IgrDataChartInteractivityModule.register();
    

    Code Snippet

    The following code demonstrates how to setup the ZoomSlider.

     <IgrZoomSlider
      width="100%"
      height="100%"
     />