djVerticalSlider - Dojo Vertical Slider

Accepts a numeric value from a vertical slider.

Category

Dojo Form

Syntax

<xe:djVerticalSlider attributes>content</xe:djVerticalSlider>
Table 1. Essential properties
Property Description
id Defaults to djVerticalSlider1, djVerticalSlider2, 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 vertical 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 Vertical 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>Vertical Slider</xp:td>
		<xp:td>
			<xe:djVerticalSlider id="djVerticalSlider1" style="margin: 5px;width:75px; 
height: 200px;"
				value="#{sessionScope.djVerticalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="leftDecoration"
					style="width:20px;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="leftDecoration" style="width:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="width:5px;"
						count="11" container="rightDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="rightDecoration" style="width:5px;font-
size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djVerticalSlider>
		</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.djVerticalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>