Format like Wavelength NumberControl in Bending Light -- Readout between tweakers above track

[samreid]

From https://github.com/phetsims/wave-interference/issues/377,

Format like Wavelength NumberControl in Bending Light -- Readout between tweakers above track.

This capability doesn't exist in common code. Bending light disabled the WavelengthSlider tweakers and added separate ones:

    // Add WavelengthSlider node
    var wavelengthSlider = new WavelengthSlider( wavelengthPropertyNM, {
      cursorStroke: 'white',
      maxWavelength: BendingLightConstants.LASER_MAX_WAVELENGTH,
      thumbWidth: 20,
      thumbHeight: 20,
      trackWidth: trackWidth,
      trackHeight: 20,
      tweakersVisible: false,
      valueVisible: false,
      thumbTouchAreaYDilation: 4
    } );

    var formattedString = StringUtils.format( wavelengthPatternString, Util.roundSymmetric( wavelengthPropertyNM.value ) );

    // Prevent the i18n strings from making the wavelength slider too wide, see #311
    var maxWidth = 80;
    var wavelengthValueText = new Text( formattedString, { maxWidth: maxWidth } );
    var wavelengthBoxShape = new Rectangle( 0, 0, new Text( unitsNmString, { maxWidth: maxWidth } ).width + 36, 18, 2, 2, {
      fill: 'white',
      stroke: 'black'
    } );

    // add plus button
    var plusButton = new ArrowButton( 'right', function propertyPlus() {
      wavelengthPropertyNM.set(
        Math.min( wavelengthPropertyNM.value + 1, BendingLightConstants.LASER_MAX_WAVELENGTH ) );
    }, {
      scale: 0.6
    } );

    // touch area
    plusButton.touchArea = new Bounds2( plusButton.localBounds.minX - 20, plusButton.localBounds.minY - 5,
      plusButton.localBounds.maxX + 20, plusButton.localBounds.maxY + 8 );

    // add minus button
    var minusButton = new ArrowButton( 'left', function propertyMinus() {
      wavelengthPropertyNM.set(
        Math.max( wavelengthPropertyNM.value - 1, VisibleColor.MIN_WAVELENGTH ) );
    }, {
      scale: 0.6
    } );

    // disable the minus button at minimum wavelength and plus button at max wavelength
    wavelengthPropertyNM.link( function( wavelength ) {
      plusButton.enabled = ( wavelength < BendingLightConstants.LASER_MAX_WAVELENGTH );
      minusButton.enabled = ( wavelength > VisibleColor.MIN_WAVELENGTH );
    } );

    // touch area
    minusButton.touchArea = new Bounds2( minusButton.localBounds.minX - 20, minusButton.localBounds.minY - 5,
      minusButton.localBounds.maxX + 20, minusButton.localBounds.maxY + 8 );

    // set the position of the wavelength text box
    wavelengthBoxShape.centerX = wavelengthSlider.centerX;
    wavelengthBoxShape.bottom = wavelengthSlider.top - 5;

    // set the position of the wavelength value in the center of text box
    wavelengthValueText.centerX = wavelengthBoxShape.centerX;
    wavelengthValueText.centerY = wavelengthBoxShape.centerY;

    // Plus button to the right of the value
    plusButton.left = wavelengthBoxShape.right + PLUS_MINUS_SPACING;
    plusButton.centerY = wavelengthBoxShape.centerY;

    // Minus button to the left of the value
    minusButton.right = wavelengthBoxShape.left - PLUS_MINUS_SPACING;
    minusButton.centerY = wavelengthBoxShape.centerY;

The best long-term solution would be to develop this as a new feature in scenery-phet. I'll open a scenery-phet issue and leave this as a marker.

[samreid]

NumberControl has no ability to swap the slider component--it is hardwired to use HSlider. I'll consult with other developers to see how to proceed here.

[samreid]

On hold until common code issue noted above is closed.

[samreid]

NumberControl can now use spectrum for slider track and thumb. This is implemented in Wave Interference and up for review and pixel polishing in other issues. Closing.