Sliders
The slider widget is an implementation of YAHOO.util.DragDrop
It also will use YAHOO.util.Animation if available to
animate the movement of the thumb when you click the
slider background.
The only difference between the two sliders aside from
the fact that one is vertical and one horizontal is that
the horizontal slider implements the "tick mark" feature
of drag and drop; it will "snap" to the tick marks spaced
25 pixels apart.
The logger is paused for performance reasons. Click "Resume" to re-enable it.
id="vertBGDiv"
name="vertBGDiv"
tabindex="0"
x2:role="role:slider"
state:valuenow="0"
state:valuemin="0"
state:valuemax="200"
title="Vertical Slider"
onkeydown="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
id="horizBGDiv"
name="horizBGDiv"
tabindex="0"
x2:role="role:slider"
state:valuenow="0"
state:valuemin="-100"
state:valuemax="100"
title="Horizontal Slider"
onkeydown="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
function handleHorizSliderKey(slider, ev) {
if (gLogger) gLogger.debug("horizontal slider keypress");
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
var valueNow = horizontalSlider.getValue();
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
var valueMin = horizontalSlider.thumb.rightConstraint;
var valueMax = horizontalSlider.thumb.leftConstraint;
var delta = 0;
var kc = ev.keyCode;
if (gLogger) gLogger.debug("keycode: " + kc);
if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
delta = -25;
} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
delta = 25;
} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
} else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
} else {
return true;
}
valueNow += delta;
horizontalSlider.setValue(valueNow, true);
if (slider.setAttributeNS) {
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
"valuenow",
valueNow);
}
// displaySlider(slider);
YAHOO.util.Event.stopEvent(ev);
return false;
}
function handleVertSliderKey(slider, ev) {
if (gLogger) gLogger.debug("vertical slider keypress");
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"), 10);
var valueNow = verticalSlider.getValue();
// var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"), 10);
// var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"), 10);
var valueMin = verticalSlider.thumb.topConstraint;
var valueMax = verticalSlider.thumb.bottomConstraint;
var delta = 0;
var kc = ev.keyCode;
if (kc == YAHOO.util.Key.DOM_VK_UP) {
delta = -20;
}
else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
delta = 20;
}
else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
delta = -( valueNow - valueMin );
}
else if (kc == YAHOO.util.Key.DOM_VK_END) {
delta = valueMax - valueNow;
}
else {
return true;
}
valueNow += delta;
if (valueNow < valueMin) {
valueNow = valueMin;
}
if (valueNow > valueMax) {
valueNow = valueMax;
}
if (slider.setAttributeNS) {
slider.setAttributeNS("http://www.w3.org/2005/07/aaa",
"valuenow", valueNow);
}
// displaySlider(slider);
verticalSlider.setValue(valueNow, true);
YAHOO.util.Event.stopEvent(ev);
return false;
}
var verticalSlider, horizontalSlider;
var gLogger;
function init() {
if (typeof(ygLogger) != "undefined") {
ygLogger.init(document.getElementById("logDiv"));
gLogger = new ygLogger("slider.php");
}
//////////////////////////////////////////////////////////////////
verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
"vertHandleDiv", 0, 200);
verticalSlider.onChange = function(offsetFromStart) {
document.getElementById("vertVal").value = offsetFromStart;
document.getElementById("vertBGDiv").title =
"Vertical Slider, value = " + offsetFromStart;
};
verticalSlider.onSlideStart = function() {
//alert("slidestart");
YAHOO.log("VERT slidestart", "warn");
}
verticalSlider.onSlideEnd = function() {
//alert("slideend");
YAHOO.log("VERT slideend", "warn");
}
// verticalSlider.setValue(20);
// verticalSlider.lock();
//verticalSlider.animate = false;
document.getElementById("vertVal").title =
"Type in slider value between 0 and 200.";
//////////////////////////////////////////////////////////////////
horizontalSlider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv",
"horizHandleDiv", 100, 100, 25);
horizontalSlider.onChange = function(offsetFromStart) {
document.getElementById("horizVal").value = offsetFromStart;
document.getElementById("horizBGDiv").title =
"Horizontal Slider, value = " + offsetFromStart;
};
horizontalSlider.onSlideStart = function() {
//alert("slidestart");
YAHOO.log("HORIZ slidestart", "warn");
};
horizontalSlider.onSlideEnd = function() {
// alert("slideend");
YAHOO.log("HORIZ slideend", "warn");
};
// horizontalSlider.lock();
document.getElementById("horizVal").title =
"Type in slider value between -100 and 100. Values " +
"will be rounded to a number divisable by 25."
}
function updateVert() {
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
if ( isNaN(v) ) v = 0;
verticalSlider.setValue(Math.round(v));
return false;
}
function updateHoriz() {
var fld = document.forms["formH"]["horizVal"];
var v = parseFloat(fld.value, 10);
if ( isNaN(v) ) v = 0;
horizontalSlider.setValue(Math.round(v));
var newVal = horizontalSlider.getValue();
if (v != newVal) {
fld.value = newVal;
}
return false;
}
window.onload = init;