SpectrumSlider¶

Overview¶

SpectrumSlider is a slider-like control used for choosing a value that corresponds to a displayed color. It is the base class for WavelengthSlider.

@author Chris Malley (PixelZoom, Inc.) @author Sam Reid (PhET Interactive Simulations)

Class SpectrumSlider¶

@deprecated use WavelengthNumberControl, or Slider.js with SpectrumSliderTrack and SpectrumSliderTrack, see https://github.com/phetsims/scenery-phet/issues/729

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

Constructor¶

new SpectrumSlider( valueProperty : TProperty<number>, providedOptions? : SpectrumSliderOptions )¶

Instance Methods¶

dispose()¶

Type SpectrumSliderOptions¶

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

• minValue?: number
  The minimum value to be displayed
• maxValue?: number
  The maximum value to be displayed
• valueToString?: ( value: number ) => string
  Maps value to string that is optionally displayed by the slider
• valueToColor?: ( value: number ) => Color
  Maps value to Color that is rendered in the spectrum and in the thumb
• trackWidth?: number
  track properties
• trackHeight?: number
• trackOpacity?: number
• trackBorderStroke?: TColor
• thumbWidth?: number
  thumb
• thumbHeight?: number
• thumbTouchAreaXDilation?: number
• thumbTouchAreaYDilation?: number
• thumbMouseAreaXDilation?: number
• thumbMouseAreaYDilation?: number
• valueFont?: Font
  value
• valueFill?: TColor
• valueVisible?: boolean
• valueYSpacing?: number
• tweakersVisible?: boolean
  tweakers
• tweakerValueDelta?: number
• tweakersXSpacing?: number
• maxTweakersHeight?: number
• tweakersTouchAreaXDilation?: number
• tweakersTouchAreaYDilation?: number
• tweakersMouseAreaXDilation?: number
• tweakersMouseAreaYDilation?: number
• cursorVisible?: boolean
  cursor, the rectangle than follows the thumb in the track
• cursorStroke?: TColor
• & StrictOmit<ParentOptions, "valueProperty" | "enabledRangeProperty">

Source Code¶

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