Skip to content

NumberSpinner

Under Construction

This documentation is auto-generated, and is a work in progress. Please see the source code at https://github.com/phetsims/sun/blob/main/js/NumberSpinner.ts for the most up-to-date information.

Overview

Spinner for numbers.

@author Chris Malley (PixelZoom, Inc.) @author Andrea Lin (PhET Interactive Simulations)

Class NumberSpinner

import { NumberSpinner } from 'scenerystack/sun';

Constructor

new NumberSpinner( numberProperty : Property<number>, rangeProperty : TReadOnlyProperty<Range>, providedOptions? : NumberSpinnerOptions )

Instance Methods

dispose()

Type NumberSpinnerOptions

import type { NumberSpinnerOptions } from 'scenerystack/sun';
  • arrowsPosition?: NumberSpinnerArrowsPosition
    where to place the arrow buttons
  • arrowsScale?: number | null
    By default, arrows are scaled to fit dimensions of value background. This is an additional scale factor.
  • arrowButtonFill?: TColor
  • arrowButtonStroke?: TColor
  • arrowButtonLineWidth?: number
  • arrowsSoundPlayer?: TSoundPlayer
  • incrementFunction?: ( ( value: number ) => number )
    Function called when the increment button is pressed. Defaults to adding options.deltaValue.
  • decrementFunction?: ( ( value: number ) => number )
    Function called when the decrement button is pressed. Defaults to subtracting options.deltaValue.
  • deltaValue?: number
    may be ignored if incrementFunction and decrementFunction are provided
  • xSpacing?: number
  • ySpacing?: number
  • numberDisplayOptions?: NumberDisplayOptions
    NumberDisplay options
  • touchAreaXDilation?: number
    arrow button pointer areas
  • touchAreaYDilation?: number
  • mouseAreaXDilation?: number
  • mouseAreaYDilation?: number
  • & StrictOmit<ParentOptions, "children" | "valueProperty" | "enabledRangeProperty" | "keyboardStep" | "shiftKeyboardStep" | "pageKeyboardStep" | "onInput">

Source Code

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