Horizontal Slider with Tick Marks
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford's JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford's JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner's animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner's algorithms for easing.
* Geoff Stearns's SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns's SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.com/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini's IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI's use of this technique is included under our BSD license with the author's permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Horizontal Slider with Tick Marks</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/slider/assets/skins/sam/slider.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#slider-bg {
background:url(yui_2.7.0b-assets/slider-assets/bg-fader.gif) 5px 0 no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Horizontal Slider with Tick Marks</h1>
<div class="exampleIntro">
<p>This example uses the <a href="http://developer.yahoo.com/yui/slider/">YUI Slider Control</a> to implement a basic horizontal slider with tick marks & that is, with predefined intervals at which the slider thumb will stop as it's dragged. (By default, a slider thumb can be dragged one pixel at a time.)</p>
<p>Here are some important characteristics of this implementation:</p>
<ul>
<li>The slider range is 200 pixels.</li>
<li>The slider movement is restricted to 20 pixel increments.</li>
<li>Custom logic is applied to convert the current pixel value
(from 0 to 200) to a "real" value. In this case the "real"
range is 0 to 300.</li>
<li>Once the slider has focus, the left and right keys will move
the thumb 20 pixels (changing the "real" value by 30).</li>
<li>When the slider value changes, the UI is updated. The title
attribute of the slider background is updated with the current
value, and the text field is updated with the current "real"
value. These techniques can help inform assistive technologies
(like screen reader software) about the slider's current state.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<!--
You supply your own markup for the slider:
- The thumb element should be a child of the slider background
- The tabindex attribute lets this element receive focus in most browsers.
- If the slider background can receive focus, the arrow keys can be used to change
this slider's value.
- We use an img element rather than a css background for the thumb to get around
a performance bottleneck when animating the thumb in IE
- Both elements should have a position style: relative or absolute
- Don't apply a css border to the slider background
-->
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
<div id="slider-thumb" class="yui-slider-thumb"><img src="yui_2.7.0b-assets/slider-assets/thumb-n.gif"></div>
</div>
<p>Pixel value: <span id="slider-value">0</span></p>
<p>Converted value:
<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
</p>
<!--We'll use these to trigger interactions with the Slider API -->
<button id="putval">Change slider value to 100 (converted value 150)</button>
<button id="getval">Write current value to the Logger</button>
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb",
valuearea="slider-value", textfield="slider-converted-value"
// The slider can move 0 pixels up
var topConstraint = 0;
// The slider can move 200 pixels down
var bottomConstraint = 200;
// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1.5;
// The amount the slider moves when the value is changed with the arrow
// keys
var keyIncrement = 20;
var tickSize = 20;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getHorizSlider(bg,
thumb, topConstraint, bottomConstraint, 20);
// Sliders with ticks can be animated without YAHOO.util.Anim
slider.animate = true;
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
// Display the pixel value of the control
valnode.innerHTML = offsetFromStart;
// use the scale factor to convert the pixel offset into a real
// value
var actualValue = slider.getRealValue();
// update the text box with the actual value
fld.value = actualValue;
// Update the title attribute on the background. This helps assistive
// technology to communicate the state change
Dom.get(bg).title = "slider value = " + actualValue;
});
slider.subscribe("slideStart", function() {
YAHOO.log("slideStart fired", "warn");
});
slider.subscribe("slideEnd", function() {
YAHOO.log("slideEnd fired", "warn");
});
// Listen for keystrokes on the form field that displays the
// control's value. While not provided by default, having a
// form field with the slider is a good way to help keep your
// application accessible.
Event.on(textfield, "keydown", function(e) {
// set the value when the 'return' key is detected
if (Event.getCharCode(e) === 13) {
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;
// convert the real value into a pixel offset
slider.setValue(Math.round(v/scaleFactor));
}
});
// Use setValue to reset the value to white:
Event.on("putval", "click", function(e) {
slider.setValue(100, false); //false here means to animate if possible
});
// Use the "get" method to get the current offset from the slider's start
// position in pixels. By applying the scale factor, we can translate this
// into a "real value
Event.on("getval", "click", function(e) {
YAHOO.log("Current value: " + slider.getValue() + "\n" +
"Converted value: " + slider.getRealValue(), "info", "example");
});
});
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.com uncompressed/chunked Thu Feb 19 10:53:18 PST 2009 -->
yui_2.7.0b.zip( 4,431 k)Related examples in the same category