Slider

[Polar Bear]

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]

The Sliders for Molecule Polarity are described in https://github.com/phetsims/molecule-polarity/blob/master/js/common/view/ElectronegativitySlider.ts.

HTML also has a built-in color picker: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Good luck!

Sam

--
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 developing-interactive-simu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/developing-interactive-simulations-in-html5/a7137a0e-3a95-41d4-8985-5b27f8078aedn%40googlegroups.com.

[cmalley]

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.

[cmalley]

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 https://phet.colorado.edu/en/simulations/wave-interference.

Chris Malley

PixelZoom, Inc.