NumberControl¶

Overview¶

NumberControl is a control for changing a Property<number>, with flexible layout. It consists of a labeled value, slider, and arrow buttons.

@author Chris Malley (PixelZoom, Inc.)

Class NumberControl¶

import { NumberControl } from 'scenerystack/scenery-phet';

Constructor¶

new NumberControl( title : string | TReadOnlyProperty<string>, numberProperty : PhetioProperty<number>, numberRange : Range, providedOptions? : NumberControlOptions )¶

Instance Methods¶

dispose()¶

Instance Properties¶

slider : HSlider¶

(readonly)

Static Methods¶

withMinMaxTicks( label : string, property : Property<number>, range : Range, providedOptions? : WithMinMaxOptions ) : NumberControl¶

Creates a NumberControl with default tick marks for min and max values.

createLayoutFunction1( providedOptions? : NumberControlLayoutFunction1Options ) : LayoutFunction¶

Creates one of the pre-defined layout functions that can be used for options.layoutFunction. Arranges subcomponents like this:

title number < ------|------ >

createLayoutFunction2( providedOptions? : NumberControlLayoutFunction2Options ) : LayoutFunction¶

Creates one of the pre-defined layout functions that can be used for options.layoutFunction. Arranges subcomponents like this:

title < number > ------|------

createLayoutFunction3( providedOptions? : NumberControlLayoutFunction3Options ) : LayoutFunction¶

Creates one of the pre-defined layout functions that can be used for options.layoutFunction. Arranges subcomponents like this:

title < number > -------|-------

createLayoutFunction4( providedOptions? : NumberControlLayoutFunction4Options ) : LayoutFunction¶

Creates one of the pre-defined layout functions that can be used for options.layoutFunction. Like createLayoutFunction1, but the title and value go all the way to the edges.

Static Properties¶

NumberControlIO : IOType¶

(readonly)

SLIDER_TANDEM_NAME¶

(readonly)

Type NumberControlOptions¶

import type { NumberControlOptions } from 'scenerystack/scenery-phet';

• startCallback?: () => void
  called when interaction begins, default value set in validateCallbacks()
• endCallback?: () => void
  called when interaction ends, default value set in validateCallbacks()
• delta?: number
• disabledOpacity?: number
  opacity used to make the control look disabled
• includeArrowButtons?: boolean
  If set to true, then increment/decrement arrow buttons will be added to the NumberControl
• numberDisplayOptions?: NumberDisplayOptions
  Subcomponent options objects
• sliderOptions?: NumberControlSliderOptions
• arrowButtonOptions?: StrictOmit<ArrowButtonOptions, "fireOnDown"> & { enabledEpsilon?: number; leftStart?: () => void; leftEnd?: ( over: boolean ) => void; rightStart?: () => void; rightEnd?: ( over: boolean ) => void }
  fireOnDown is buggy, so omit it, see https://github.com/phetsims/scenery-phet/issues/825
• titleNodeOptions?: TextOptions
• enabledRangeProperty?: SliderOptions[ 'enabledRangeProperty' ]
  If provided, this will be provided to the slider and arrow buttons in order to constrain the range of actual values to within this range.
• soundGenerator?: ValueChangeSoundPlayer | null
  This is used to generate sounds as the value of the number is changed using the slider or the buttons. If not provided, a default sound generator will be created. If set to null, the number control will generate no sound.
• valueChangeSoundGeneratorOptions?: ValueChangeSoundPlayerOptions
  Options for the default sound generator. These should only be provided when NOT providing a custom sound player.
• layoutFunction?: LayoutFunction
  A {function} that handles layout of subcomponents. It has signature function( titleNode, numberDisplay, slider, decrementButton, incrementButton ) and returns a Node. If you want to customize the layout, use one of the predefined creators (see createLayoutFunction*) or create your own function. Arrow buttons will be null if includeArrowButtons:false
• & StrictOmit<TrimParallelDOMOptions<NodeOptions>, "children">

Source Code¶

See the source for NumberControl.ts in the scenery-phet repository.