Slider Navigation Menu
Slider 2 Example
Validate DOM (HTML5)
Year Range Slider Example 1: 1900 - 2008
1950
2000
Lower limit of date range 1
Upper limit of date range 1
Keyboard Shortcuts
- Left / Down: Decrease (one unit)
- Right / Up: Increase (one unit)
- PgUp / Pgdown: Large change (10 units)
- Home: Set slider to minimum
- End: Set slider to maximum
- Tab: Navigate between slider controls
ARIA Roles and Properties
- Roles:
- States and properties:
aria-labeledbyaria-valuenowaria-valuemaxaria-valueminaria-presentationaria-controls
HTML Source Code
Show HTML Source Code: slider2_inline.inc
<div role="application">
<script type="text/javascript">
var slider1 = new SliderRange("sr1", "sr1_low", "sr1_high");
widgets.add(slider1);
</script>
<h3 id="label_1" class="label">Year Range Slider Example 1: 1900 - 2008</h3>
<div
class="slider"
id="sr1">
<img id="sr1_low"
src="images/slider2a.gif"
role="slider"
tabindex="0"
aria-labelledby="sr1_low_label"
aria-valuenow="1950"
aria-valuemin="1900"
aria-valuemax="2000"
aria-controls="sr1_high"
/>
<div id="sr1_low_text" role="presentation">1950</div>
<img id="sr1_high"
src="images/slider2a.gif"
role="slider"
tabindex="0"
aria-labelledby="sr1_high_label"
aria-valuenow="2000"
aria-valuemin="1950"
aria-valuemax="2008"
aria-controls="sr1_low"
/>
<div id="sr1_high_text" role="presentation">2000</div>
</div>
<div id="sr1_low_label" class="hidden">Lower limit of date range 1</div>
<div id="sr1_high_label" class="hidden">Upper limit of date range 1</div>
</div>
Javascript Source Code
Show Javascript Source Code: globals.js
<script type="text/javascript">
/**
*
* The Globale Variables
*/
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;
var KEY_END = 35;
var KEY_HOME = 36;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_ENTER = 13;
var KEY_INSERT = 45;
var KEY_ESCAPE = 27;
var KEY_F1 = 112;
var KEY_F2 = 113;
var KEY_F3 = 114;
var KEY_F4 = 115;
var KEY_F5 = 116;
var KEY_F6 = 117;
var KEY_F7 = 118;
var KEY_F8 = 119;
var KEY_F9 = 120;
var KEY_F10 = 121;
var KEY_M = 77;
var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";
// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************
/**
*
* nextSiblingElement
*
* @contructor
*/
function nextSiblingElement( node ) {
var next_node = node.nextSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/
function previousSiblingElement( node ) {
var next_node = node.previousSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.previousSibling;
} // endwhile
return next_node;
}
/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/
function firstChildElement( node ) {
var next_node = node.firstChild;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* getTextContentOfNode
*
* @contructor
*/
function getTextContentOfNode( node ) {
var next_node = node.firstChild;
var str = "";
while( next_node ) {
if( (next_node.nodeType == Node.TEXT_NODE ) &&
(next_node.length > 0 )
)
str += next_node.data;
next_node = next_node.nextSibling;
} // endwhile
return str;
}
/**
*
* setTextContentOfNode
*
* @contructor
*/
function setTextContentOfNode( node, text ) {
// Generate a new text node with the text value
var text_node = document.createTextNode(text);
// Remove child nodes to remove text
while (node.firstChild) {
node.removeChild(node.firstChild);
} // while
// Append new text to the container element
node.appendChild( text_node );
}
</script>
Show Javascript Source Code: browser.js
<script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";
//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {
}
//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )
WebBrowser.prototype.keyCode = function( event ) {
var e = event || window.event;
return e.keyCode;
}
/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/
if( document.createEvent ) {
// If a web standards based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
// W3C DOM Events way to trigger a "click" event
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
node.dispatchEvent( e );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
var e = document.createEventObject();
node.fireEvent( "onclick", e );
} // endif
}
if ( document.addEventListener ) {
// If a web standards based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( clickHandler )
document.addEventListener( "click", clickHandler, true );
if( downHandler )
document.addEventListener( "mousedown", downHandler, true );
if( moveHandler )
document.addEventListener( "mousemove", moveHandler, true );
if( upHandler)
document.addEventListener( "mouseup", upHandler, true );
}
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler)
document.removeEventListener( "mouseup", upHandler, true );
if( moveHandler )
document.removeEventListener( "mousemove", moveHandler, true );
if( downHandler )
document.removeEventListener( "mousedown", downHandler, true );
if( clickHandler )
document.removeEventListener( "click", clickHandler, true );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
node.setCapture();
if( clickHandler)
node.attachEvent( "onclick", clickHandler );
if( downHandler)
node.attachEvent( "onmousedown", downHandler );
if( moveHandler )
node.attachEvent( "onmousemove", moveHandler );
if( upHandler )
node.attachEvent( "onmouseup", upHandler );
} // endif
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler )
node.detachEvent( "onmouseup", upHandler );
if( moveHandler )
node.detachEvent( "onmousemove", moveHandler );
if( downHandler)
node.detachEvent( "onmousedown", downHandler );
if( clickHandler)
node.detachEvent( "onclick", clickHandler );
node.releaseCapture();
} // endif
}
if (typeof document.documentElement.setAttributeNS != 'undefined') {
WebBrowser.prototype.stopPropagation = function( event ) {
if( event.stopPropagation )
event.stopPropagation();
if( event.preventDefault )
event.preventDefault();
return false;
}
WebBrowser.prototype.target = function( event ) {
return event.target;
}
WebBrowser.prototype.attrName = function( event ) {
return event.attrName;
}
WebBrowser.prototype.testAttrName = function( event , attrName) {
return event.attrName == attrName;
}
WebBrowser.prototype.charCode = function(event) {
return event.charCode;
}
WebBrowser.prototype.calculateOffsetLeft = function( node ) {
return node.offsetLeft;
}
WebBrowser.prototype.calculateOffsetTop = function( node ) {
return node.offsetTop;
}
WebBrowser.prototype.pageX = function( e ) {
return e.pageX;
}
WebBrowser.prototype.pageY = function( e ) {
return e.pageY;
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
node.style.left = left+"px";
node.style.top = top+"px";
}
} else {
WebBrowser.prototype.stopPropagation = function( event ) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
WebBrowser.prototype.charCode = function(event) {
return window.browser.keyCode( event );
}
WebBrowser.prototype.target = function( event ) {
return event.srcElement;
}
WebBrowser.prototype.attrName = function( event ) {
return event.propertyName;
}
WebBrowser.prototype.testAttrName = function( event , attrName) {
var str = attrName;
if( attrName.indexOf("aria-") >=0 ) {
str = attrName.replace(/aria-/,"");
var node = document.getElementById('test1');
if( node )
node.innerHTML = str.substr(0,1).toUpperCase();
var len = str.length;
str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
var node = document.getElementById('test2');
// if( node )
// node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
}
return event.propertyName == str;
}
WebBrowser.prototype.calculateOffsetLeft = function(node) {
var offset = 0;
while( node ) {
offset += node.offsetLeft;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.calculateOffsetTop = function(node) {
var offset = 0;
while( node ) {
offset = offset + node.offsetTop;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.pageX = function( e ) {
return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
WebBrowser.prototype.pageY = function( e ) {
return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
offsetx = 0;
offsety = 0;
nnode = node.offsetParent
while( nnode ) {
offsetx = offsetx + nnode.offsetLeft;
offsety = offsety + nnode.offsetTop;
nnode = nnode.offsetParent;
}
node.style.left = left-offsetx+"px";
node.style.top = top-offsety+"px";
}
};
if (document.addEventListener) {
// Functions for W3C Standards compliant implementation of adding event handlers
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.addEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.removeEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
elmTarget.addEventListener("DOMAttrModified", fCallback, false);
returnValue = true;
};
} else {
if(document.attachEvent) {
// IE Specific Event handler functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
};
} else {
// For browsers that do not support W3C or IE event functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
return false;
};
}
}
var browser = new WebBrowser();
</script>
Show Javascript Source Code: widgets.js
<script type="text/javascript">
// JavaScript Document
// Widgets is a way to initialize widgets in the ARIA examples
function Widgets() {
this.widgets = new Array();
}
/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.add = function(obj) {
this.widgets[this.widgets.length] = obj;
}
/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.init = function() {
for(var i = 0; i < this.widgets.length; i++ )
this.widgets[i].init();
}
var widgets = new Widgets();
function initApp() {
widgets.init();
}
</script>
Show Javascript Source Code: slider2.js
<script type="text/javascript">
/*
* moveSliderLower
*
* @param ( slider object ) slider object
* @param
*
* @return none
*/
function moveSliderLower( slider, value ) {
var value_min = slider.node_lower.getAttribute("aria-valuemin");
var value_max = slider.node_higher.getAttribute("aria-valuemax");
var value_range = value_max - value_min;
var value_higher = slider.node_higher.getAttribute("aria-valuenow");
if( value ) {
if(value > value_higher)
value = value_higher;
if(value < value_min)
value = value_min;
slider.node_lower.setAttribute("aria-valuenow", value );
slider.node_higher.setAttribute("aria-valuemin", value );
} // endif
var top = browser.calculateOffsetTop( slider.node );
var left = browser.calculateOffsetLeft( slider.node );
var width = slider.node.clientWidth;
top -= 25;
left = left - 30 + (( slider.node_lower.getAttribute("aria-valuenow").valueOf() - value_min ) * width) / value_range;
slider.node_lower.style.position = "absolute";
slider.node_lower.style.top = top + "px";
slider.node_lower.style.left = left + "px";
setTextContentOfNode(slider.node_lower_text, value);
slider.node_lower_text.style.position = "absolute";
slider.node_lower_text.style.top = top + 80 + "px";
slider.node_lower_text.style.left = left + "px";
}
/*
* moveSliderHigher
*
* @param ( id ) id of text to style
*
* @return none
*/
function moveSliderHigher( slider, value ) {
var value_min = slider.node_lower.getAttribute("aria-valuemin");
var value_max = slider.node_higher.getAttribute("aria-valuemax");
var value_range = value_max - value_min;
var value_lower = slider.node_lower.getAttribute("aria-valuenow");
if( value ) {
if(value < value_lower)
value = value_lower;
if(value > value_max)
value = value_max;
slider.node_higher.setAttribute("aria-valuenow", value );
slider.node_lower.setAttribute( "aria-valuemax", value );
} // endif
var top = browser.calculateOffsetTop( slider.node );
var left = browser.calculateOffsetLeft( slider.node );
var width = slider.node.clientWidth;
top -= 25;
left = left + (( slider.node_higher.getAttribute("aria-valuenow").valueOf() - value_min ) * width) / value_range;
slider.node_higher.style.position = "absolute";
slider.node_higher.style.top = top + "px";
slider.node_higher.style.left = left + "px";
setTextContentOfNode(slider.node_higher_text, value);
slider.node_higher_text.style.position = "absolute";
slider.node_higher_text.style.top = top + 80 + "px";
slider.node_higher_text.style.left = left + "px";
}
/*
* SliderRange Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function SliderRange( id, id_lower, id_higher ) {
this.id = id;
this.id_lower = id_lower;
this.id_higher = id_higher
this.id_lower_text = id_lower + "_text";
this.id_higher_text = id_higher + "_text";
this.mouse_down = false;
}
/*
* Init
*
* @member SliderRange
* @param ( id ) id of text to style
*
* @return none
*/
SliderRange.prototype.init = function() {
this.node = document.getElementById(this.id);
this.node_lower = document.getElementById(this.id_lower);
this.node_higher = document.getElementById(this.id_higher);
this.node_lower_text = document.getElementById(this.id_lower_text);
this.node_higher_text = document.getElementById(this.id_higher_text);
this.value_min = this.node_lower.getAttribute("aria-valuemin");
this.value_max = this.node_higher.getAttribute("aria-valuemax");
this.value_range = this.value_max - this.value_min;
// Initialize position of the pointers
moveSliderLower( this, this.node_lower.getAttribute("aria-valuenow") );
moveSliderHigher( this, this.node_higher.getAttribute("aria-valuenow") );
var obj1 = this.node_lower;
var obj2 = this.node_higher;
// add focus and blur event handlers
browser.addEvent(this.node_lower, "focus", function(event) {handleSliderFocusEvent(event, obj1 );}, false);
browser.addEvent(this.node_lower, "blur", function(event) {handleSliderBlurEvent(event, obj1 );}, false);
browser.addEvent(this.node_higher, "focus", function(event) {handleSliderFocusEvent(event, obj2 );}, false);
browser.addEvent(this.node_higher, "blur", function(event) {handleSliderBlurEvent(event, obj2 );}, false);
var obj = this;
// add keyboard event handlers
browser.addEvent(this.node_lower, "keydown", function(event) {handleLowerSliderKeyDownEvent(event, obj );}, false);
browser.addEvent(this.node_higher, "keydown", function(event) {handleHigherSliderKeyDownEvent(event, obj );}, false);
// add mouse event handlers
browser.addEvent(this.node_lower, "mousedown", function(event) {handleLowerSliderMouseDownEvent(event, obj );}, false);
browser.addEvent(this.node_higher, "mousedown", function(event) {handleHigherSliderMouseDownEvent(event, obj );}, false);
}
// handleSliderKeyDownEvent
//
function handleLowerSliderKeyDownEvent(event, slider ) {
var e = event || window.event;
if( e.ctrlKey || e.shiftKey || e.altKey )
return true;
switch( e.keyCode ) {
case KEY_END:
var value = new Number(slider.node_higher.getAttribute("aria-valuenow"));
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
case KEY_HOME:
var value = new Number(slider.node_lower.getAttribute("aria-valuemin"));
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
case KEY_PAGEUP:
var value = new Number(slider.node_lower.getAttribute("aria-valuenow")) + 10;
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
case KEY_PAGEDOWN:
var value = new Number(slider.node_lower.getAttribute("aria-valuenow")) - 10;
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
case KEY_UP:
case KEY_RIGHT:
var value = new Number(slider.node_lower.getAttribute("aria-valuenow")) + 1;
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
case KEY_DOWN:
case KEY_LEFT:
var value = new Number(slider.node_lower.getAttribute("aria-valuenow")) - 1;
moveSliderLower( slider, value );
return browser.stopPropagation( event);
break;
} // end switch
return true;
}
// handleSliderKeyDownEvent
//
function handleHigherSliderKeyDownEvent(event, slider ) {
var e = event || window.event;
if( e.ctrlKey || e.shiftKey || e.altKey )
return true;
switch( e.keyCode ) {
case KEY_END:
var value = new Number(slider.node_higher.getAttribute("aria-valuemax"));
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
case KEY_HOME:
var value = new Number(slider.node_lower.getAttribute("aria-valuenow"));
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
case KEY_PAGEUP:
var value = new Number(slider.node_higher.getAttribute("aria-valuenow")) + 10;
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
case KEY_PAGEDOWN:
var value = new Number(slider.node_higher.getAttribute("aria-valuenow")) - 10;
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
case KEY_UP:
case KEY_RIGHT:
var value = new Number(slider.node_higher.getAttribute("aria-valuenow")) + 1;
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
case KEY_DOWN:
case KEY_LEFT:
var value = new Number(slider.node_higher.getAttribute("aria-valuenow")) - 1;
moveSliderHigher( slider, value );
return browser.stopPropagation( event);
break;
} // end switch
return true;
}
// handleLowerSliderMouseDownEvent
//
function handleLowerSliderMouseDownEvent(event, slider ) {
var e = event || window.event;
slider.node_lower.src = "images/slider2.gif";
slider.node_lower.focus();
slider.mouse_down = true;
slider.move_function = function( event ) { handleLowerSliderMouseMoveEvent(event, slider ); };
slider.up_function = function( event ) { handleLowerSliderMouseUpEvent(event, slider ); };
browser.setMouseCapture( slider.node_lower, null, null, slider.move_function, slider.up_function );
return browser.stopPropagation( e );
}
// handleLowerSliderMouseDownEvent
//
function handleLowerSliderMouseMoveEvent(event, slider ) {
var e = event || window.event;
if (e.type == "mousemove" && slider.mouse_down) {
pointer_page_x = Math.round( browser.pageX( e) );
slider_page_x = Math.round(browser.calculateOffsetLeft( slider.node ));
button_width = Math.round((slider.node_lower.offsetWidth) / 2 );
diff = pointer_page_x - slider_page_x + button_width;
if( diff > 0 ) {
value_min = Math.round(slider.node_lower.getAttribute("aria-valuemin"));
value_max = Math.round(slider.node_lower.getAttribute("aria-valuemax"));
slider_max = Math.round(slider.node_higher.getAttribute("aria-valuemax"));
value_size = slider_max - value_min;
// calculate the percentage of the slider bar where the user clicked
value_now = value_min + Math.round(( diff * value_size )/ slider.node.offsetWidth);
if( value_now > value_max )
value_now = value_max;
} else {
value_now = slider.node_lower.getAttribute("aria-valuemin");
}
moveSliderLower( slider, value_now );
return browser.stopPropagation( e );
} //endif
return browser.stopPropagation( e );
}
// handleLowerSliderMouseUpEvent
//
function handleLowerSliderMouseUpEvent(event, slider ) {
var e = event || window.event;
slider.node_lower.src = "images/slider2a.gif";
slider.mouse_down = false;
browser.releaseMouseCapture( slider.node_lower, null, null, slider.move_function, slider.up_function );
return browser.stopPropagation( e );
}
// handleHigherSliderMouseDownEvent
//
function handleHigherSliderMouseDownEvent(event, slider ) {
var e = event || window.event;
// Update impage to show focus is on slider
slider.node_higher.src = "images/slider2.gif";
// Move keyboard focus to slider
slider.node_higher.focus();
slider.mouse_down = true;
slider.move_function = function( event ) { handleHigherSliderMouseMoveEvent(event, slider ); };
slider.up_function = function( event ) { handleHigherSliderMouseUpEvent(event, slider ); };
browser.setMouseCapture( slider.node_higher, null, null, slider.move_function, slider.up_function );
return browser.stopPropagation( e );
}
// handleHigherSliderMouseDownEvent
//
function handleHigherSliderMouseMoveEvent(event, slider ) {
var e = event || window.event;
if (e.type == "mousemove" && slider.mouse_down) {
pointer_page_x = Math.round( browser.pageX( e) );
slider_page_x = Math.round(browser.calculateOffsetLeft( slider.node ));
button_width = Math.round((slider.node_higher.offsetWidth) / 2 );
diff = pointer_page_x - slider_page_x - button_width;
if( diff > 0 ) {
value_min = Math.round(slider.node_higher.getAttribute("aria-valuemin"));
value_max = Math.round(slider.node_higher.getAttribute("aria-valuemax"));
slider_min = Math.round(slider.node_lower.getAttribute("aria-valuemin"));
value_size = value_max - slider_min;
// calculate the percentage of the slider bar where the user clicked
value_now = slider_min + Math.round(( diff * value_size )/ slider.node.offsetWidth);
if( value_now < value_min )
value_now = value_min;
} else {
value_now = slider.node_higher.getAttribute("aria-valuemin");
}
moveSliderHigher( slider, value_now );
return browser.stopPropagation( e );
} //endif
return browser.stopPropagation( e );
}
// handleHigherSliderMouseUpEvent
//
function handleHigherSliderMouseUpEvent(event, slider ) {
var e = event || window.event;
slider.node_higher.src = "images/slider2a.gif";
slider.mouse_down = false;
browser.releaseMouseCapture( slider.node_higher, null, null, slider.move_function, slider.up_function );
return browser.stopPropagation( e );
}
// handleSliderFocusEvent
//
function handleSliderFocusEvent(event, node ) {
var e = event || window.event;
node.src = "images/slider2.gif";
return browser.stopPropagation( e );
}
// handleSliderBlurEvent
//
function handleSliderBlurEvent(event, node ) {
var e = event || window.event;
node.src = "images/slider2a.gif";
return browser.stopPropagation( e );
}
</script>
CSS Source Code
Show CSS Source Code: slider2.css
<style type="text/css">
/* CSS Document */
.label {
margin: 0;
padding: 0;
margin-top: 2em;
margin-bottom: .5em;
clear: both;
font-weight: bold;
}
div.slider {
margin: 0;
padding: 0;
margin-top: 100px;
margin-bottom: 100px;
width: 540px;
height: 20px;
border: 2px solid black;
background-color: #A0A0A0;
}
div.slider img {
margin: 0;
padding: 0;
position: absolute;
left: -30em;
top: -30em;
}
.hidden {
position: absolute;
top: -20em;
left: -200em;
}
</style>