djSliderRuleLabels - Dojo Slider Rule Labels

Adds labels to the rule for a horizontal or vertical slider.

Category

Dojo Form

Syntax

<xe:djSliderRuleLabels attributes>content</xe:djSliderRuleLabels>
Table 1. Essential properties
Property Description
id Defaults to djSliderRuleLabels1, djSliderRuleLabels2, and so on.
style Provides dimensions for the labels.
container Specifies the location of the labels: topDecoration, bottomDecoration, leftDecoration, or rightDecoration.
count, labels, labelsList Specifies the labels as a count of percentages or as the actual labels.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, constraints, count, dir, id, labels, labelsList, lang, loaded, maximum, minimum, numericMargin, rendered, rendererType
dojo dojoAttributes, dojoType, dragRestriction, tooltip
events onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format container
styling disableTheme, labelStyle, ruleStyle, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, the labels appear outside the slider rule.

Examples

This example consists of a Horizontal Slider bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.
<xp:table>
	<xp:tr>
		<xp:td>Horizontal Slider</xp:td>
		<xp:td>
			<xe:djHorizontalSlider id="djHorizontalSlider1" style="margin: 5px;width:200px; height: 20px;"
				value="#{sessionScope.djHorizontalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="topDecoration"
					style="height:10px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="topDecoration" style="height:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="height:5px;"
						count="11" container="bottomDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="bottomDecoration" style="height:10px;font-size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djHorizontalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djHorizontalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>