Skip to content

ToggleSwitch

Overview

ToggleSwitch is a switch for toggling between 2 values, similar to iOS' UISwitch, used in iOS `'Settings' app.

Interaction behavior is as follows: Drag the thumb to change the value, or click anywhere to toggle the value. If you click without dragging, it's a toggle. If you drag but don't cross the midpoint of the track, then it's a toggle. If you drag past the midpoint of the track, releasing the thumb snaps to whichever end the thumb is closest to. If you drag the thumb far enough to the side (outside of the switch), it will immediately toggle the model behavior.

@author Chris Malley (PixelZoom, Inc.) @author Jonathan Olson (PhET Interactive Simulations)

Class ToggleSwitch

import { ToggleSwitch } from 'scenerystack/sun';

Constructor

new ToggleSwitch( property : Property<T>, leftValue : T, rightValue : T, providedOptions? : ToggleSwitchOptions )

Instance Methods

dispose()

Instance Properties

switchToLeftSoundPlayer : TSoundPlayer

(readonly)

switchToRightSoundPlayer : TSoundPlayer

(readonly)

onInputEmitter : TEmitter

(readonly)

Emits on input that results in a change to the Property value, after the Property has changed.

Type ToggleSwitchOptions

import type { ToggleSwitchOptions } from 'scenerystack/sun';
  • size?: Dimension2
    if you want the thumb to be a circle, use width that is 2x height
  • toggleWhileDragging?: null | boolean
    controls the behavior of when model value changes occur during dragging (if any) null: triggers model changes when thumb is dragged far enough to the side, similar to iOS true: triggers model changes whenever the thumb crosses sides false: only trigger model changes until release
  • dragThreshold?: number
    number of view-space units the drag needs to cover to be considered a "drag" instead of a "click/tap"
  • toggleThreshold?: number
    number of thumb-widths outside the normal range past where the model value will change
  • thumbFill?: TPaint
    thumb
  • thumbStroke?: TPaint
  • thumbTouchAreaXDilation?: number
  • thumbTouchAreaYDilation?: number
  • thumbMouseAreaXDilation?: number
  • thumbMouseAreaYDilation?: number
  • trackFillLeft?: TPaint
    track
  • trackFillRight?: TPaint
  • trackStroke?: TPaint
  • switchToLeftSoundPlayer?: TSoundPlayer
    sound
  • switchToRightSoundPlayer?: TSoundPlayer
  • leftValueContextResponse?: TAlertable
    If provided, these responses will be spoken to describe the change in context for both Voicing and Interactive Description features when value changes to either left or right value.
  • rightValueContextResponse?: TAlertable
  • accessibleSwitch?: boolean
    pdom - If true, aria attributes are added to this Node to indicate that it is a switch. Aria switches do not work well when selecting between non-boolean values, so you can disable this if needed.
  • & TrimParallelDOMOptions<ParentOptions>

Source Code

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