This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. Extensions can be found in the GoJS kit under the `extensions` or `extensionsTS` folders. See the Extensions intro page for more information.

### Hierarchy

- ZoomSlider

This class implements a zoom slider for GoJS diagrams. The constructor takes two arguments:

- `diagram` Diagram a reference to a GoJS Diagram
- `options` Object an optional JS Object describing options for the slider

Options:

- `alignment` Spot see alignment
- `alignmentFocus` Spot see alignmentFocus
- `size` number see size
- `buttonSize` number see buttonSize
- `orientation` string see orientation
- `opacity` number see opacity

Example usage of ZoomSlider:

    var zoomSlider = new ZoomSlider(myDiagram,
      {
        alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
        size: 150, buttonSize: 30, orientation: 'horizontal'
      });

This is the basic HTML Structure that the ZoomSlider creates as a sibling div of the diagram:

    <div class="zoomSlider">
      <button id="zoomSliderOut" class="zoomButton">-</button>
      <div id="zoomSliderRangeCtn" class="zoomRangeContainer">
        <input id="zoomSliderRange" class="zoomRangeInput" type="range" min="-50" max="100">
      </div>
      <button id="zoomSliderIn" class="zoomButton">+</button>
    </div>

The diagram div's parent element should use `position: relative` to ensure the slider gets positioned properly.

If you want to experiment with this extension, try the Zoom Slider sample.

## Index

### Constructors

- constructor

### Properties

- alignment
- alignmentFocus
- buttonSize
- diagram
- opacity
- orientation
- size

### Methods

- remove

## Constructors

### constructor

- new ZoomSlider(diagram: Diagram, options?: object): ZoomSlider

- Constructs a ZoomSlider and sets up properties based on the options provided. Also sets up change listeners on the Diagram so the ZoomSlider stays up-to-date.

  #### Parameters

  - ##### diagram: Diagram

    a reference to a GoJS Diagram

  - ##### Optional options: object

    an optional JS Object describing options for the slider

    - ##### [index: string]: any

  #### Returns ZoomSlider

## Properties

### alignment : Spot

- Gets or sets the alignment Spot of this slider to determine where it should be placed relative to the diagram. The default value is Spot.BottomRight.

### alignmentFocus : Spot

- Gets or sets the Spot on this slider to be used as the alignment point when placing it relative to the diagram. The default value is Spot.BottomRight.

### buttonSize : number

- Gets or sets the height/width of the buttons at each end of the slider. The default value is 25.

### Read-only diagram : Diagram

- This read-only property returns the diagram for which the slider is handling zoom.

### opacity : number

- Gets or sets the opacity of the slider. The default value is 0.75.

### orientation : string

- Gets or sets whether the slider is oriented vertically or horizontally. Must be either "horizontal" or "vertical" and is case-sensitive. The default value is `"vertical"`.

### size : number

- Gets or sets the overall length, in pixels, that the slider will occupy. The default value is 125.

## Methods

### remove

- remove(): void

- Remove the slider from the page.

  #### Returns void

Copyright © 1998-2020 by Northwoods Software Corporation.