Ranged Panel API

Last updated: Sept 02, 2015 by Alan HarnumVersion comment

2 min read

Ranged Panel Overview

The ranged panel component provides a means to create panels that adjust a value by clicking DOM elements such as buttons, as well as showing the adjusted value in a meter. The ranged panel component is not intended to be used on its own, but provided as a base grade to another component that will use it's capabilities for creating such panels. An UI example of one of these panels:

On This Page

See Also

Still need help?

Join the infusion-users mailing list and ask your questions there.

Adding a Ranged Panel to a Component/Grade

To mixin the Ranged Panel into your Component/Grade:

fluid.defaults("my.component", {
    gradeNames: ["gpii.firstDiscovery.panel.ranged", "autoInit"]
});

Grades

The base grades used by the Ranged Panel:

Model

Path	Description	Values	Default
`value`	The selected value of the ranged component	`Number`	undefined

Methods

Method	Description	Parameters
`stepUp`	Increases the model `value` by the `step` provided in component options.	None
`stepDown`	Decreases the model `value` by the `step` provided in component options.	None
`updateMeter`	Updates the meter DOM element to show the current model `value.`	None

Options

Name	Description	Values	Default
`range`	An object that contains two elements: "min" and "max". They determine the minimum and maximum values of the range.	Object "min" and "max" values are numbers.	range: { min: 1, max: 2 }
`step`	Determines the size or amount of each interval or step the slider takes between the min and max.	Number	step: 0.1

Name

Description

Values

Default

range

An object that contains two elements: "min" and "max". They determine the minimum and maximum values of the range.

Object

"min" and "max" values are numbers.

range: {
    min: 1,
    max: 2
}

step

Determines the size or amount of each interval or step the slider takes between the min and max.

Number

step: 0.1

Selectors

One of the options that can be provided to the First Discovery Editor is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

Selector Name	Description	Default
`rangeInstructions`	The panel instruction.	".gpiic-fd-range-disabledMsg"
`controls`	The wrapper container for all control items listed below	".gpiic-fd-range-controls"
`meter`	The meter that shows the selected value	".gpiic-fd-range-indicator"
`max`	The container to display the label for the maximum value, such as "fast"	".gpiic-fd-range-max"
`min`	The container to display the label for the minimum value, such as "slow"	".gpiic-fd-range-min"
`increase`	The DOM element that triggers the increase of the selected value by clicking it	".gpiic-fd-range-increase"
`decrease`	The DOM element that triggers the decrease of the selected value by clicking it	".gpiic-fd-range-decrease"

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>
<script type="text/javascript" src="src/js/panels.js"></script>