djHorizontalSlider - Dojo Horizontal Slider

Accepts a numeric value from a horizontal slider.

Category

Dojo Form

Syntax

<xe:djHorizontalSlider attributes>content</xe:djHorizontalSlider>
Table 1. Essential properties
Property Description
id Defaults to djHorizontalSlider1, djHorizontalSlider2, and so on.
value Binds the control to a data element.
style Provides dimensions for the slider.
discreteValues Specifies the number of values on the slider.
minimum Specifies the starting value of the slider.
maximum Specifies the ending value of the slider.
Table 2. All properties
Category Properties
accessibility alt, tabIndex, title, waiRole, waiState
basics binding, clickSelect, dir, disabled, discreteValues, id, immediate, lang, loaded, maximum, minimum, multipleSeparator, multipleTrim, pageIncrement, readOnly, rendered, rendererType, required, showButtons, slideDuration, type
data converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a horizontal slider appears on the page. The user can slide the slider to select a numeric value.

Use djSliderRule - Dojo Slider Rule and djSliderRuleLabels - Dojo Slider Rule Labels to add rules (hash marks) and labels.

This control is not recommended for use on mobile if adhering to the latest accessibility standards. The recommended accessible path is to use an alternative approach to achieve the same functional behavior.

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>