Class 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:

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

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>
Copy

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.