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.
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.
a reference to a GoJS Diagram
an optional JS Object describing options for the slider
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
Gets or sets the overall length, in pixels, that the slider will occupy. The default value is 125.
Remove the slider from the page.
This class implements a zoom slider for GoJS diagrams. The constructor takes two arguments:
diagramDiagram a reference to a GoJS Diagram
optionsObject an optional JS Object describing options for the slider
alignmentSpot see alignment
alignmentFocusSpot see alignmentFocus
sizenumber see size
buttonSizenumber see buttonSize
orientationstring see orientation
opacitynumber see opacity
Example usage of ZoomSlider:
This is the basic HTML Structure that the ZoomSlider creates as a sibling div of the diagram:
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.