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

    The following sample demonstrates how to use IgrZoomSlider to navigate content in IgrDataChart.

    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

    Component 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%"
 />

    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: