Skip to content

Slider

Overview

Slider, with support for horizontal and vertical orientations. By default, the slider is constructed in the horizontal orientation, then adjusted if the vertical orientation was specified.

Note: This type was originally named HSlider, renamed in https://github.com/phetsims/sun/issues/380.

@author Chris Malley (PixelZoom, Inc.)

Class Slider

import { Slider } from 'scenerystack/sun';

Constructor

new Slider( valueProperty : PhetioProperty<number>, range : Range | TReadOnlyProperty<Range>, providedOptions? : SliderOptions )

Instance Methods

dispose()

addMajorTick( value : number, label? : Node )

Adds a major tick mark.

addMinorTick( value : number, label? : Node )

Adds a minor tick mark.

setMajorTicksVisible( visible : boolean )

Sets visibility of major ticks.

getMajorTicksVisible() : boolean

Gets visibility of major ticks.

setMinorTicksVisible( visible : boolean )

Sets visibility of minor ticks.

getMinorTicksVisible() : boolean

Gets visibility of minor ticks.

Instance Properties

enabledRangeProperty : TReadOnlyProperty<Range>

(readonly)

thumbDragListener : DragListener

(readonly)

public so that clients can access Properties of these DragListeners that tell us about its state See https://github.com/phetsims/sun/issues/680

trackDragListener : DragListener

(readonly)

Static Properties

THUMB_NODE_TANDEM_NAME

(readonly)

standardized tandem names, see https://github.com/phetsims/sun/issues/694

TRACK_NODE_TANDEM_NAME

(readonly)

SliderIO : IOType

(readonly)

Type SliderOptions

We provide these options to the super, also enabledRangeProperty is turned from required to optional

import type { SliderOptions } from 'scenerystack/sun';
  • orientation?: Orientation
  • trackNode?: SliderTrack | null
    optional track, replaces the default. Client is responsible for highlighting, disable and pointer areas. For instrumented Sliders, a supplied trackNode must be instrumented. The tandem component name must be Slider.TRACK_NODE_TANDEM_NAME and it must be nested under the Slider tandem.
  • trackSize?: Dimension2 | null
    track - options to create a SliderTrack if trackNode not supplied
  • trackFillEnabled?: TPaint
  • trackFillDisabled?: TPaint
  • trackStroke?: TPaint
  • trackLineWidth?: number
  • trackCornerRadius?: number
  • trackPickable?: boolean
  • thumbNode?: Node | null
    optional thumb, replaces the default. Client is responsible for highlighting, disabling and pointer areas. The thumb is positioned based on its center and hence can have its origin anywhere Note for PhET-IO: This thumbNode should be instrumented. The thumb's dragListener is instrumented underneath this thumbNode. The tandem component name must be Slider.THUMB_NODE_TANDEM_NAME and it must be nested under the Slider tandem.
  • thumbSize?: Dimension2 | null
    Options for the default thumb, ignored if thumbNode is set
  • thumbFill?: TPaint
  • thumbFillHighlighted?: TPaint
  • thumbStroke?: TPaint
  • thumbLineWidth?: number
  • thumbCenterLineStroke?: TPaint
  • thumbTouchAreaXDilation?: number
    dilations are specific to orientation
  • thumbTouchAreaYDilation?: number
  • thumbMouseAreaXDilation?: number
  • thumbMouseAreaYDilation?: number
  • thumbYOffset?: number
    Applied to default or supplied thumb
  • cursor?: string
  • disabledOpacity?: number
    opacity applied to the entire Slider when disabled
  • phetioLinkedProperty?: PhetioObject | null
    If provided, create a LinkedElement for this PhET-iO instrumented Property, instead of using the passed in Property. This option was created to support passing DynamicProperty or "wrapping" Property that are "implementation details" to the PhET-iO API, and still support having a LinkedElement that points to the underlying model Property.
  • soundGenerator?: ValueChangeSoundPlayer | null
    This is used to generate sounds as the slider is moved by the user. If not provided, the default sound generator will be created. If set to null, the slider will generate no sound.
  • valueChangeSoundGeneratorOptions?: ValueChangeSoundPlayerOptions
    Options for the default sound generator. These should only be provided when using the default.
  • & SliderTickOptions & StrictOmit<ParentOptions, RequiredParentOptionsSuppliedBySlider> & PickOptional<ParentOptions, "enabledRangeProperty">

Source Code

See the source for Slider.ts in the sun repository.