Setting the NumberControl tick labels

phetsims · Mar 21, 2023 · 9a1930e · 9a1930e · AgustinVallejo · Mar 21, 2023
1 parent f438f70
commit 9a1930e
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/js/common/view/MySolarSystemControls.ts b/js/common/view/MySolarSystemControls.ts
@@ -6,7 +6,7 @@
  * @author Agustín Vallejo
  */
 
-import { HBox, HSeparator, Node, RichText, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
+import { HBox, HSeparator, Node, RichText, Text, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
 import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
 import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import mySolarSystem from '../../mySolarSystem.js';
@@ -15,7 +15,8 @@ import createVisibilityInformationCheckboxes from '../../../../solar-system-comm
 import createArrowsVisibilityCheckboxes from '../../../../solar-system-common/js/view/createArrowsVisibilityCheckboxes.js';
 import createOrbitalInformationCheckboxes from './createOrbitalInformationCheckboxes.js';
 import MySolarSystemModel from '../model/MySolarSystemModel.js';
-import HSlider from '../../../../sun/js/HSlider.js';
+import NumberControl from '../../../../scenery-phet/js/NumberControl.js';
+import SolarSystemCommonColors from '../../../../solar-system-common/js/SolarSystemCommonColors.js';
 
 type SelfOptions = EmptySelfOptions;
 
@@ -40,9 +41,22 @@ export default class MySolarSystemControls extends VBox {
           spacing: 0,
           enabledProperty: model.gravityVisibleProperty,
           children: [
-            new RichText( `Scale: x10<sup>${model.forceScaleProperty.range.min}</sup>`, SolarSystemCommonConstants.TEXT_OPTIONS ),
-            new HSlider( model.forceScaleProperty, model.forceScaleProperty.range ),
-            new RichText( `x10<sup>${model.forceScaleProperty.range.max}</sup>`, SolarSystemCommonConstants.TEXT_OPTIONS )
+            new Text( 'Scale:', SolarSystemCommonConstants.TEXT_OPTIONS ),
+            // new HSlider( model.forceScaleProperty, model.forceScaleProperty.range ),
+            // new RichText( `x10<sup>${model.forceScaleProperty.range.max}</sup>`, SolarSystemCommonConstants.TEXT_OPTIONS )
+            new NumberControl( 'Scale', model.forceScaleProperty, model.forceScaleProperty.range, {
+              arrowButtonOptions: { visible: false },
+              sliderOptions: {
+                constrainValue: ( power: number ) => Math.abs( power ) < 0.5 ? 0 : power,
+                majorTickStroke: SolarSystemCommonColors.foregroundProperty,
+                majorTickLength: 8,
+                trackFillEnabled: SolarSystemCommonColors.foregroundProperty,
+                majorTicks: [
+                  { value: -2, label: new RichText( 'x10<sup>-2</sup', SolarSystemCommonConstants.TEXT_OPTIONS ) },
+                  { value: 8, label: new RichText( 'x10<sup>8</sup', SolarSystemCommonConstants.TEXT_OPTIONS ) }
+                ]
+              }
+            } )
           ]
         } ),
         new HSeparator( SolarSystemCommonConstants.HSEPARATOR_OPTIONS ),