Skip to first unread message

Polar Bear

Nov 5, 2022, 10:47:55 PM11/5/22
to Developing Interactive Simulations in HTML5
Hello, I am trying to use the slider code from the molecule polarity simulation to change the colour of a shape, however I am unable to extract the slider code. 
I tried to section the slider by focusing on the "Electronegativity Panel " and "Electronegativity Slider", however I am still unable to do so. 

Could anyone provide me with some help?

Sam Reid

Nov 6, 2022, 8:16:44 AM11/6/22
to Polar Bear, Developing Interactive Simulations in HTML5
You received this message because you are subscribed to the Google Groups "Developing Interactive Simulations in HTML5" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To view this discussion on the web visit


Nov 6, 2022, 5:52:56 PM11/6/22
to Developing Interactive Simulations in HTML5

Greetings Polar Bear!

I was the primary developer for the Molecule Polarity simulation. The slider in Molecule Polarity is ElectronegativitySlider, which is a subclass of HSlider.  It adds functionality that is specific to Molecule Polarity, which makes it more complicated to adapt to other applications. So I do NOT recommend trying to reuse ElectronegativitySlider in your application.

Instead, please see PhET’s “sun” repository, which is where you’ll find PhET’s standard slider, and other standard UI components. Slider.ts is the base class. HSlider.ts is a horizontal slider, while VSlider.ts is a vertical slider — and they are both subclasses of Slider. Source code is in the sun/js/ directory.

For examples of how to use HSlider and VSlider, see the sun demo application, specifically sun/js/demo/components/demoSlider.ts. To run the sun demo, load sun/sun_en.html in your browser.  Go to the “Components” screen, and select HSlider or VSlider from the “Select a Demo” menu.  

I hope this helps!

Chris Malley / PixelZoom, Inc.


Nov 6, 2022, 6:07:26 PM11/6/22
to Developing Interactive Simulations in HTML5
On more thought... If you're interested in a slider to change color, you might have a look at WavelengthNumberControl.ts in the scenery-phet repository.  You can see an example of its use in the "Diffraction" screen of the "Wave Interference" simulation at

Chris Malley
PixelZoom, Inc.

Reply all
Reply to author
0 new messages