<style scoped>
#demo input {
width: 2em;
}
.horiz_slider {
margin-left: 1ex;
}
.vert_slider {
margin-bottom: 1em;
}
</style>
<div class="intro">
<p>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.</p>
<p>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>`.</p>
<p>The first Slider is set up in a more traditional JavaScript coding style and
the second using the shorter, method chaining style.</p>
</div>
{{>slider-basic-html}}
<script>
{{>slider-basic-js}}
</script>
<h3>Horizontal Slider with default configuration</h3>
<p>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.</p>
```
var xSlider = new Y.Slider();
// render into the <span> next to the input
xSlider.render( ".horiz_slider" );
```
<h3>Linking a Slider with a text input</h3>
<p>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`.</p>
```
// Function to update the input value from the Slider value
function updateInput( e ) {
}
var xInput = Y.one( "#horiz_value" );
// Subscribe to the Slider's valueChange event, passing the input as the 'this'
xSlider.on( "valueChange", updateInput, xInput );
```
<h3>Linking the input with the Slider</h3>
<p>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.</p>
<p>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.</p>
```
// 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 ) {
}
// Update the Slider on a delay to allow time for typing
data.wait = null;
this.set( "value", value );
} );
}
xInput.setData( { slider: xSlider } );
xInput.on( "keyup", updateSlider );
```
<h3>Creating the vertical Slider</h3>
<p>To create a vertical Slider you just need to set the `axis` attribute to "y".</p>
<p>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.</p>
<p>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`.</p>
<p>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).</p>
<p>Finally, the `valueChange` subscription is included in the configuration as well.</p>
```
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
```
<h3>Full Code Listing</h3>
<h4>HTML</h4>
```
<!-- Add the yui3-skin-sam class to a containing element to apply the default skin -->
{{>slider-basic-html}}
```
<h4>JavaScript</h4>
```
{{>slider-basic-js}}
```