Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ZoomSlider Extension

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 (for loading via script tags),extensionsTS (UMD modules), or extensionsJSM (ES6 modules) 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

  • 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: {}

      an optional JS Object describing options for the slider

      • [index: string]: any

    Returns ZoomSlider

Properties

  • 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.

  • 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.

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

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

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

  • 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".

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

Methods

  • remove(): void
  • Remove the slider from the page.

    Returns void