NumberPicker¶

Overview¶

NumberPicker is a UI component for picking a number value from a range. This is actually a number spinner, but PhET refers to it as a 'picker', so that's what this class is named.

@author Chris Malley (PixelZoom, Inc.)

Class NumberPicker¶

import { NumberPicker } from 'scenerystack/sun';

Constructor¶

new NumberPicker( valueProperty : Property<number>, rangeProperty : TReadOnlyProperty<Range>, providedOptions? : NumberPickerOptions )¶

Instance Methods¶

dispose()¶

setArrowsVisible( visible : boolean )¶

Sets visibility of the arrows.

Static Methods¶

createIcon( value : number, providedOptions? : CreateIconOptions ) : Node¶

Type NumberPickerOptions¶

import type { NumberPickerOptions } from 'scenerystack/sun';

• color?: TColor
• pressedColor?: TColor
• backgroundColor?: TColor
• cornerRadius?: number
• xMargin?: number
• yMargin?: number
• decimalPlaces?: number
• font?: Font
• incrementFunction?: ( value: number ) => number
• decrementFunction?: ( value: number ) => number
• timerDelay?: number
• timerInterval?: number
• noValueString?: string
• align?: Align
• touchAreaXDilation?: number
• touchAreaYDilation?: number
• mouseAreaXDilation?: number
• mouseAreaYDilation?: number
• backgroundStroke?: TColor
• backgroundLineWidth?: number
• arrowHeight?: number
• arrowYSpacing?: number
• arrowStroke?: TColor
• arrowLineWidth?: number
• valueMaxWidth?: number | null
• backgroundStrokeDisabledOpacity?: number
  Use disabledOpacity, backgroundStrokeDisabledOpacity, arrowDisabledOpacity to implement 'display mode' when NumberPicker is disabled. See https://github.com/phetsims/sun/issues/932.
• arrowDisabledOpacity?: number
• formatValue?: ( value: number ) => string
  Converts a value to a string to be displayed in a Text node. NOTE: If this function can give different strings to the same value depending on external state, it is recommended to rebuild the NumberPicker when that state changes (as it uses formatValue over the initial range to determine the bounds that labels can take).
• onInput?: ( event: SceneryEvent | null, oldValue: number ) => void
  Listener that is called when the NumberPicker has input on it due to user interaction.
• incrementEnabledFunction?: ( value: number, range: Range ) => boolean
  Determines when the increment arrow is enabled.
• decrementEnabledFunction?: ( value: number, range: Range ) => boolean
  Determines when the decrement arrow is enabled.
• disabledOpacity?: number
  Opacity used to indicate disabled, [0,1] exclusive
• valueChangedSoundPlayer?: TSoundPlayer
  Sound generators for when the NumberPicker's value changes, and when it hits range extremities. Use nullSoundPlayer to disable.
• boundarySoundPlayer?: TSoundPlayer
• & StrictOmit<ParentOptions, "valueProperty" | "enabledRangeProperty" | "pdomTimerDelay" | "pdomTimerInterval">

Source Code¶

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