Class SliderControl

Creates a "slider plus textbox" control that displays and modifies the given ParameterNumber. Consists of a label plus a slider and textbox which show the value of the ParameterNumber. Modifying the slider changes the value of the ParameterNumber, as does editing the number in the textbox.

In most browsers you can use the arrow keys to adjust the value after clicking on the slider. Some browsers highlight the slider when it is active.

The HTML elements created are wrapped in a single <div> element. The slider has a classname of slider for CSS scripting. The label is just text within the <div>.

SliderControl Math

The value of the SliderControl can only roughly match the value of the ParameterNumber because SliderControl can only take on discrete values. In the following, sliderIndex means the value of the HTML range element, which is an integer from 0 to increments.

SliderControl can multiply or add a factor to move between increments. If it adds, the relationships are:

delta = (maximum - minimum)/increments
value = minimum + delta*sliderIndex
sliderIndex = Math.floor((value - minimum)/delta)
Copy

If it multiplies, the relationships are:

delta = exp((ln(maximum) - ln(minimum)) / increments)
value = minimum * (delta^sliderIndex)
ln(value) = ln(minimum) + sliderIndex*ln(delta)
sliderIndex = (ln(value) - ln(minimum)) / ln(delta)
Copy

Number Formatting

The number is formatted without any thousands separators and with the number of fractional decimal places depending on the "mode".

• Fixed decimal places mode shows the number of decimal places given by getDecimalPlaces. Ignores significant digits setting. Fixed decimal places mode is active when getDecimalPlaces() returns 0 or greater.

• Variable decimal places mode ensures that the requested number of significant digits are visible. Adjusts decimal places shown based on the magnitude of the value. See setSignifDigits. Variable decimal places mode is active when getDecimalPlaces() returns –1.

The default settings are gotten from the ParameterNumber: see ParameterNumber.setDecimalPlaces and ParameterNumber.setSignifDigits.

The displayed value is rounded to a certain number of digits, and therefore the displayed value can differ from the target value. SliderControl allows for this difference by only making changes to the target value when the the user modifies the displayed value, or when setValue is called.

Preventing Forbidden Values

To prevent the user from entering forbidden values (such as enforcing upper or lower limits) the setter function can throw an Error. An alert is displayed to the user with the text of the Error. After dismissing the alert, the displayed value will be restored to match the current target value, as returned by the getter. (Note that the user's input is discarded).

How SliderControl Works

Both the slider and the text are approximations of the value of the ParameterNumber. SliderControl allows for this difference by only making changes to the target value when the the user modifies the displayed value, or when setValue is called.

There are 3 entities to coordinate: ParameterNumber, textbox, slider. Each has its own notion of the current value; changes can come from any of the 3 entities. The textbox and slider are limited in the values they can represent because of rounding in textbox or increments in slider. Essentially we need to:

• Distinguish between a genuine change vs. events coming thru as a result of updating a control or ParameterNumber in response to a genuine change (we can call these 'echo events').

• when a genuine change occurs, update all 3 entities.

The ParameterNumber can take on any value allowed by the ParameterNumber's upper and lower limits. If the ParameterNumber takes on a value outside the range of the slider, then the slider will be at its min or max position.

Odd Behavior in Browsers

• In all browsers, clicking in the slider area moves the thumb to that position. In Safari and Chrome, clicking directly on the thumb does not change the value. But in Firefox, clicking directly on the thumb does "move to that position" which results in the value being set to the nearest increment.

• Safari does not visually highlight the thumb after clicking it.

• In Safari, to be able to "tab select" to get to the slider, turn on the option in Preferences>Advanced called "Press Tab to highlight each item on a webpage".

History

In an earlier version the slider and text box were both contained in a <label> element. This caused confusion because click events would be passed to the for entity of the label. The for attribute of a label seems to be the first control unless it is explicitly specified. The solution is to not use <label> for grouping the slider elements, but use a <div> instead.