Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ZoomSlider

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. 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:

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

  • 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