Hover over the menu bar to pick a physics animation.
This is a description of a method to fully document the HTML range element. This method provides a pop up text balloon that explains the the meaning of the value of the range. A range is called a slider in xaml and we will use the term slider here. You probably have noted that physicsanimation.org uses a lot of range elements to adjust the parameters of the animation. Some of these parameters involve physical dimensions on the screen and these could be changed by a much more inconvenient method known as mouse dragging. But others like the number of particles can only be adjusted by either a text box or a slider. A text box has the disadvantage that the input has to have its input data type checked for being a number and its upper and lower limits checked. A slider's input is intrinsically a number and its upper and lower limits are easily set in HTML. Adjusting a slider is also easier and quicker than inputting the same value with a text box.
The goal of any utility program like slider2.js is to handle an indefinite number of slider elements. To do that, only one function in slider2.js handles all of the slider displays. The sliders, the canvases that provide the text balloons, the contexts for the canvases, as well as the text that goes in the balloon are all put in arrays which have the same number of elements as the number of sliders. Then, when the mouse enters a given slider, the balloon for that slider is displayed to explain the function of that slider. To be convincing, an arrow of the value and color of that slider is drawn on a separate canvas. As always, the learner is welcome to hit the buttons that provide the source text in the browser that they are using. For the Apple OS, this is option-command i.