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 LayoutFunction¶

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

( titleNode: Node, numberDisplay: NumberDisplay, slider: Slider, decrementButton: ArrowButton | null, incrementButton: ArrowButton | null ) => Node

Type NumberControlLayoutFunction1Options¶

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

• align?: "center" | "left" | "right"
  horizontal alignment of rows, 'left'|'right'|'center'
• titleXSpacing?: number
  horizontal spacing between title and number
• arrowButtonsXSpacing?: number
  horizontal spacing between arrow buttons and slider
• ySpacing?: number
  vertical spacing between rows

Type NumberControlLayoutFunction2Options¶

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

• align?: "center" | "left" | "right"
  horizontal alignment of rows, 'left'|'right'|'center'
• xSpacing?: number
  horizontal spacing in top row
• ySpacing?: number
  vertical spacing between rows

Type NumberControlLayoutFunction3Options¶

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

• alignTitle?: "center" | "left" | "right"
  horizontal alignment of title, relative to slider, 'left'|'right'|'center'
• alignNumber?: "center" | "left" | "right"
  horizontal alignment of number display, relative to slider, 'left'|'right'|'center'
• titleLeftIndent?: number
  if provided, indent the title on the left to push the title to the right
• xSpacing?: number
  horizontal spacing between arrow buttons and slider
• ySpacing?: number
  vertical spacing between rows

Type NumberControlLayoutFunction4Options¶

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

• sliderPadding?: number
  adds additional horizontal space between title and NumberDisplay
• verticalSpacing?: number
  vertical spacing between slider and title/NumberDisplay
• arrowButtonSpacing?: number
  spacing between slider and arrow buttons
• numberDisplayParentNodeOptions?: StrictOmit<NodeOptions, "children">
  Provided to the containing Node of the NumberDisplay
• createBottomContent?: ( ( box: HBox ) => Node ) | null
  Supports Pendulum Lab's questionText where a question is substituted for the slider
• layoutInvisibleButtons?: boolean
  Whether invisible increment/decrement buttons (or the slider itself) should be laid out as if they were there

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
• useRichText?: boolean
• titleNodeOptions?: TextOptions | RichTextOptions
  options passed to Text or RichText (depending on the value of options.useRichText) that displays the value
• 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">

Type NumberControlSliderOptions¶

Other slider options that are specific to NumberControl. Accessibility options should be set on the NumberControl.

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

StrictOmit<RemoveParallelDOMOptions<SliderOptions>, "enabledRangeProperty"> & { majorTicks?: NumberControlMajorTick[]; minorTickSpacing?: number }

Type WithMinMaxOptions¶

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

• tickLabelFont?: Font
• & NumberControlOptions

Source Code¶

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