Skip to content

Slider

Slider (from scenerystack/sun) is the class that actually implements dragging a thumb along a track, clamped to a Range and written into a numeric PropertyHSlider and VSlider are both thin subclasses that only fix orientation. Reach for HSlider/VSlider for ordinary fixed-orientation sliders; use Slider directly when the orientation itself needs to vary at runtime (e.g. a control that flips between a horizontal and vertical layout depending on screen size), or when writing code generic over Orientation that shouldn't have to pick between two classes.

ts
import { Slider } from 'scenerystack/sun';
import { NumberProperty } from 'scenerystack/axon';
import { Range } from 'scenerystack/dot';
import { Orientation } from 'scenerystack/phet-core';
import { Tandem } from 'scenerystack/tandem';

const volumeProperty = new NumberProperty( 50, { range: new Range( 0, 100 ) } );

const slider = new Slider( volumeProperty, new Range( 0, 100 ), {
  orientation: Orientation.VERTICAL,
  tandem: Tandem.REQUIRED
} );

Slider's constructor signature, positionProperty/Range handling, tick marks (addMajorTick/addMinorTick), and most options are identical to what HSlider documents — that page's options table (trackSize, thumbSize, enabledRangeProperty, constrainValue, trackNode/thumbNode, …) all come from Slider itself. The one option HSliderOptions removes that Slider still has is orientation.

What HSlider/VSlider fix

ClassFixes
HSliderorientation: Orientation.HORIZONTAL
VSliderorientation: Orientation.VERTICAL
SliderNeither — orientation defaults to Orientation.HORIZONTAL but can be set (or swapped) explicitly

When orientation is Orientation.VERTICAL, Slider swaps trackSize/thumbSize and the touch/mouse-area dilation options internally (since you always describe dimensions as if the slider were horizontal, then it's rotated), so client code doesn't need its own orientation-swapping logic.

Public API worth knowing beyond HSlider's table

MemberMeaning
enabledRangePropertyA TReadOnlyProperty<Range> narrower than or equal to the full track range — this is what actually constrains the value, same as documented on HSlider
thumbDragListenerThe internal DragListener driving the thumb — public so client code can inspect its isPressedProperty/isHoveringProperty
trackDragListenerThe internal DragListener for clicking/dragging directly on the track
addMajorTick( value, label? ) / addMinorTick( value, label? )Same tick API as HSlider
setMajorTicksVisible / setMinorTicksVisibleToggle tick visibility

Slider also mixes in Sizable — internally it makes itself non-sizable on whichever axis isn't its orientation (a horizontal slider sets heightSizable = false) and sizable on the other, so it can participate in a FlowBox's stretch/grow layout along its own axis.

Most code should still reach for HSlider or VSlider

Slider is documented separately mainly so the shared implementation is clear, and so generic/orientation-swapping code has somewhere to import from. For an ordinary fixed-orientation slider, HSlider/VSlider communicate intent more clearly and remove one option you'd otherwise have to remember to set.