加入 GoJS 交流群
（769862113）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.
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 "vertical".
Gets or sets the overall length, in pixels, that the slider will occupy. The default value is 125.
Remove the slider from the page.
（769862113）
This class implements a zoom slider for GoJS diagrams. The constructor takes two arguments:
diagramDiagram a reference to a GoJS DiagramoptionsObject an optional JS Object describing options for the sliderOptions:
alignmentSpot see alignmentalignmentFocusSpot see alignmentFocussizenumber see sizebuttonSizenumber see buttonSizeorientationstring see orientationopacitynumber see opacityExample 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.