This example walks you through the basics of creating a Slider from script. + Both Sliders in this example link to text input fields that expect numeric input. The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.
+ +The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values. It is rendered into a </div>.
The first Slider is set up in a more traditional JavaScript coding style and + the second using the shorter, method chaining style.
+Horizontal Slider
++ + + +
+ +Vertical Slider
+ + + +Horizontal Slider with default configuration
+Sliders are horizontal by default, with available values ranging from 0 to 100, and an initial value of 0. The rail is 150 pixels long plus a few pixels for the rail's end caps.
+ +var xSlider = new Y.Slider(); + +// render into the <span> next to the input +xSlider.render( ".horiz_slider" );+ + +
Linking a Slider with a text input
+To keep the Slider's value and input value in sync, you need to subscribe to events on both the input and the Slider. For Slider-to-input, the interesting event is valueChange.
// Function to update the input value from the Slider value
+function updateInput( e ) {
+ this.set( "value", e.newVal );
+}
+
+var xInput = Y.one( "#horiz_value" );
+// Subscribe to the Slider's valueChange event, passing the input as the 'this'
+xSlider.on( "valueChange", updateInput, xInput );
+
+
+Linking the input with the Slider
+To feed input changes back to the Slider we'll listen to its keyup event. But we'll put the update on a delay to allow for a user to finish typing.
Additionally, we'll make the update function generic, since we have two Sliders in this example. We'll leverage the setData and getData methods of Node instances and store a reference to the Slider. Then we can use this object from inside the function to get back to the slider the input is related to.
// Function to pass input value back to the Slider
+function updateSlider( e ) {
+ var data = this.getData(),
+ slider = data.slider,
+ value = parseInt( this.get( "value" ), 10 );
+
+ if ( data.wait ) {
+ data.wait.cancel();
+ }
+
+ // Update the Slider on a delay to allow time for typing
+ data.wait = Y.later( 200, slider, function () {
+ data.wait = null;
+ this.set( "value", value );
+ } );
+}
+
+xInput.setData( { slider: xSlider } );
+xInput.on( "keyup", updateSlider );
+
+
+Creating the vertical Slider
+To create a vertical Slider you just need to set the axis attribute to "y".
For this Slider, we'll use more extensive method chaining and include value and rail configurations. First we'll change the value range from 0 - 100 to -100 - +100 and set an initial value of +30.
+ +Note that the min configuration is 100 in this case because the top is associated with the minimum value. Slider has no qualms about min being greater than max.
The rail length is then configured to be 201 pixels, so each value has a distinct pixel position on the rail (don't forget 0).
+ +Finally, the valueChange subscription is included in the configuration as well.
var yInput = Y.one( "#vert_value" );
+yInput.setData( "slider", new Y.Slider({
+ axis: 'y',
+ min : 100, // min is the value at the top
+ max : -100, // max is the value at the bottom
+ value : 30, // initial value
+ length: '201px', // rail extended to afford all values
+
+ // construction-time event subscription
+ after : {
+ valueChange: Y.bind( updateInput, yInput )
+ }
+ }).render( ".vert_slider" ) // render returns the Slider
+ ) // set( "data", ... ) returns the Node
+ .on( "keyup", updateSlider ); // chain the keyup subscription
+
+
+Full Code Listing
+ +HTML
+ +
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<div id="demo" class="example yui3-skin-sam"> <!-- You need this skin class --> + + <h4>Horizontal Slider</h4> + <p> + <label for="horiz_value">Value: </label> + <input id="horiz_value" value="0"> + <span class="horiz_slider"></span> + </p> + + <h4>Vertical Slider</h4> + <p><label for="vert_value">Value: </label><input id="vert_value" value="30"></p> + <div class="vert_slider"></div> + +</div>+ + +
JavaScript
+// Create a YUI instance and request the slider module and its dependencies
+YUI().use("slider", function (Y) {
+
+var xInput, // input tied to xSlider
+ yInput, // input tied to ySlider
+ xSlider; // horizontal Slider
+
+// Function to pass input value back to the Slider
+function updateSlider( e ) {
+ var data = this.getData(),
+ slider = data.slider,
+ value = parseInt( this.get( "value" ), 10 );
+
+ if ( data.wait ) {
+ data.wait.cancel();
+ }
+
+ // Update the Slider on a delay to allow time for typing
+ data.wait = Y.later( 200, slider, function () {
+ data.wait = null;
+ this.set( "value", value );
+ } );
+}
+
+// Function to update the input value from the Slider value
+function updateInput( e ) {
+ this.set( "value", e.newVal );
+}
+
+
+
+// Create a horizontal Slider using all defaults
+xSlider = new Y.Slider();
+
+// Link the input value to the Slider
+xInput = Y.one( "#horiz_value" );
+xInput.setData( { slider: xSlider } );
+
+// Pass the input as the 'this' object inside updateInput
+xSlider.after( "valueChange", updateInput, xInput );
+xInput.on( "keyup", updateSlider );
+
+// Render the Slider next to the input
+xSlider.render('.horiz_slider')
+
+
+// Create the vertical Slider.
+yInput = Y.one( "#vert_value" );
+yInput.setData( "slider", new Y.Slider({
+ axis: 'y',
+ min : 100, // min is the value at the top
+ max : -100, // max is the value at the bottom
+ value : 30, // initial value
+ length: '201px', // rail extended to afford all values
+
+ // construction-time event subscription
+ after : {
+ valueChange: Y.bind( updateInput, yInput )
+ }
+ }).render( ".vert_slider" ) // render returns the Slider
+ ) // set( "data", ... ) returns the Node
+ .on( "keyup", updateSlider ); // chain the keyup subscription
+
+});
+
+