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

    The following sample demonstrates how to use IgcZoomSliderComponent to navigate content in IgcDataChartComponent.

    Usage

    Nome do Recurso Descrição
    Navegação por barra de rolagem Os usuários podem alterar a escala e rolar por intervalos de dados usando os recursos integrados da barra de rolagem do ZoomSlider.
    Panorâmica e zoom Os usuários podem ajustar a escala de exibição arrastando as bordas do teclado para fazer com que a exibição atual cubra uma faixa maior (diminuir o zoom) ou uma faixa menor (aumentar o zoom).
    Várias opções de interação do usuário Todas as interações do usuário do mouse são suportadas redundantemente por meio do toque e a maioria delas – por meio do teclado. Para detalhes, veja Interações do usuário e usabilidade.
    Suporte de toque Em dispositivos habilitados para toque, os usuários podem aproveitar a funcionalidade completa do ZoomSlider. Todas as interações do mouse são suportadas no ambiente de toque.
    Extensibilidade O controle ZoomSlider oferece suporte imediato ao controle DataChart.
    Janela de intervalo de zoom configurável A largura e a posição da janela de zoom inicial, bem como seu tamanho mínimo, são configuráveis.

    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

    Component Modules

    The IgcZoomSliderComponent requires the following modules:

    import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
import { IgcZoomSliderComponent } from "igniteui-webcomponents-charts";

IgcZoomSliderModule.register();

    Code Snippet

    O código a seguir demonstra como configurar o ZoomSlider.

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

    Additional Resources

    Você pode encontrar mais informações sobre gráficos no tópico Recursos de gráficos.

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima: