djSliderRule - Dojo Slider Rule

Adds a rule (hash marks) for a horizontal or vertical slider.

Category

Dojo Form

Syntax

<xe:djSliderRule attributes>content</xe:djSliderRule>
Table 1. Essential properties
Property Description
id Defaults to djSliderRule1, djSliderRule2, and so on.
style Provides dimensions for the rule.
container Specifies the location of the rule: topDecoration, bottomDecoration, leftDecoration, or rightDecoration.
count Specifies the number of hash marks.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, count, dir, id, lang, loaded, 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, 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>