Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

simpleslider (gallery-simpleslider) on cdn

Last Updated: 02/19/10

+ -1 -

Adam Moore

YUI Contributor

See 4 more by this user.

Created: 02/19/10
Last CDN Push: 02/19/10
Build Tag: gallery-2010.02.19-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.

A very small and very simple slider implementation that can be used to create horizontal, vertical, and 2-D sliders. It is a Node plugin that implements drag and drop, and it uses the gallery-center module for thumb positioning. The movement of the thumb, and the value of the control, is dictated by the markup and CSS. There is very little script required to get it to work.

Tags:
slider
adam

This example will create a horizontal slider with a range from 0 to 200. You can adjust the range and orientation by changing the CSS.

Code Sample

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <title>YUI 3 gallery horizontal slider</title>
	<style> 
.slider {
    position: relative;
    text-align: center;
    cursor: move;
    padding: 0;
    margin: 0;
    height: 21px;
    width: 21px;
}
 
.slider div { }
 
#slider-contentbox {
    top: 100px;
    left: 100px;
    position: relative;
    height: 1px;
    width: 201px;
    padding: 10px;
    background-color: #CDCDCD;
}
#slider-valuebox {
    position: relative;
    height: 1px;
    background-color: #666;
}
 
#slider-thumb { 
    background-color: blue;
    top:-10px;
    left:-10px;
    color: #000;
}
</style> 
</head>
<body>
    <div id="slider-contentbox"> 
        <div id="slider-valuebox"> 
            <div id="slider-thumb" class="slider"> </div> 
        </div> 
    </div> 
    <div id="positionlog"></div>
 
    <div id="centerlog"></div>
    <input type="button" id="updatebutton" value="update" />
    <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js" type="text/javascript"></script> 
    <script type="text/javascript">
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.02.19-03'
}).use('dd-constrain', 'node', 'gallery-center', 'gallery-simpleslider', function( Y ) {
        var thumb = Y.one('#slider-thumb'),
            slider = new Y.apm.SimpleSlider({
                node: '#slider-contentbox'
            }).render();
 
        slider.on('valueChange', function(e) {
            Y.one('#positionlog').set('innerHTML', thumb.getXY());
            Y.one('#centerlog').set('innerHTML', e.newVal);
        });
 
        Y.on('click', function(e) {
            slider.update([50, 0]);
        }, '#updatebutton');
    })
    </script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <title>YUI 3 gallery horizontal slider</title>
	<style> 
.slider {
    position: relative;
    text-align: center;
    cursor: move;
    padding: 0;
    margin: 0;
    height: 21px;
    width: 21px;
}
 
.slider div { }
 
#slider-contentbox {
    top: 100px;
    left: 100px;
    position: relative;
    height: 1px;
    width: 201px;
    padding: 10px;
    background-color: #CDCDCD;
}
#slider-valuebox {
    position: relative;
    height: 1px;
    background-color: #666;
}
 
#slider-thumb { 
    background-color: blue;
    top:-10px;
    left:-10px;
    color: #000;
}
</style> 
</head>
<body>
    <div id="slider-contentbox"> 
        <div id="slider-valuebox"> 
            <div id="slider-thumb" class="slider">Â </div> 
        </div> 
    </div> 
    <div id="positionlog"></div>

<div id="centerlog"></div>
    <input type="button" id="updatebutton" value="update" />
    <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js" type="text/javascript"></script> 
    <script type="text/javascript">
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.02.19-03'
}).use('dd-constrain', 'node', 'gallery-center', 'gallery-simpleslider', function( Y ) {
        var thumb = Y.one('#slider-thumb'),
            slider = new Y.apm.SimpleSlider({
                node: '#slider-contentbox'
            }).render();

slider.on('valueChange', function(e) {
            Y.one('#positionlog').set('innerHTML', thumb.getXY());
            Y.one('#centerlog').set('innerHTML', e.newVal);
        });

Y.on('click', function(e) {
            slider.update([50, 0]);
        }, '#updatebutton');
    })
    </script>
</body>
</html>

Forum Posts

No forum posts for this module.