a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-from-markup-css}}
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="intro">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <p>This example illustrates a few points:</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <li>How to create a Slider using existing markup</li>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <li>How to disable a Slider</li>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <li>How to use an image sprite to create a custom Slider skin</li>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <p>The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration. <strong>Click on the speaker icon to show the Slider</strong>.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div class="example">
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith {{>slider-from-markup-html}}
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-from-markup-js}}
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3 id="prog_enh">Progressive Enhancement</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>The <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> strategy recommends that your page not contain markup that will only be useful in cases where JavaScript is available. For this reason, Slider does not include an `HTML_PARSER` to reuse existing markup. However, it is possible to override a couple methods to accomplish the task.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>The starting markup for the volume control area is as follows:</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<div id="volume_control" class="volume-hide">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <span id="volume_slider">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <span class="yui3-slider-rail">
0b4aa295eb9cd70464a942d1d1d4c29b7750a5e7Luke Smith <span class="yui3-slider-thumb"><img src="{{componentAssets}}/images/sprite.png" height="384" width="31"></span>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly <label for="mute"><input type="checkbox" id="mute"> mute</label>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>To tell the Slider to use the existing rail and thumb elements, override the `renderRail` and `renderThumb` methods.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar volume = new Y.Slider({
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly min : 100, // reverse min and max to make the top
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly max : 0, // equal 100 and the bottom 0
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly length: '105px'
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Override renderRail to just return the existing rail node
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly return Y.one( "#volume_slider span.yui3-slider-rail" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Override renderThumb to just return the existing thumb node
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly return this.rail.one( "span.yui3-slider-thumb" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvolume.render( "#volume_slider" );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3 id="syncui">Hide and show the Slider</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>By default, we want the Slider to be hidden until the user clicks on the speaker icon. However, we want to support muting or changing the value of the Slider while it is hidden.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar control = Y.one('#volume_control'),
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly icon = Y.one('#volume_icon'),
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly open = false;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyfunction showHideSlider(e) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly open = !open;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyicon.on('click', showHideSlider);
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Also support hiding the Slider when the user clicks outside the
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly// Slider element.
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyfunction handleDocumentClick(e) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly !volume.get('boundingBox').contains(e.target)) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly showHideSlider();
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny DonnellyY.one( 'doc' ).on('click', handleDocumentClick );
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3 id="demo_mute">Mute and unmute</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>We want to disable the Slider and input and set the value to 0 if a user checks the mute checkbox. The value should be returned to the last assigned value when unmuted. To disable the Slider, set its `disabled` attribute to `true`.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyvar volInput = Y.one('#volume'),
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly mute = Y.one('#mute'),
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly beforeMute = 0;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellyfunction muteVolume(e) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly // Set disabled to false if currently true; true if currently false
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly var disabled = !volume.get('disabled');
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly volume.set('disabled', disabled);
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly if (disabled) {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly volInput.set('disabled','disabled');
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly volInput.set('disabled','');
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnellymute.on('click', muteVolume);
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3>Skinning and CSS</h3>
0b4aa295eb9cd70464a942d1d1d4c29b7750a5e7Luke Smith<img id="demo_sprite" src="{{componentAssets}}/images/sprite.png" height="384" width="31" alt="Sprite of all custom image resources for this example">
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>We'll be using the image sprite to the left to create a custom skin. In this design, to keep things simple, the Slider's container and end caps are all rendered together at the bottom of the sprite.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Slider's thumb range is constrained by the rail element, so it wouldn't be appropriate to use this image as the rail's background—the thumb would slide off the ends. Instead, the rail image is assigned as the background to the Slider's containing element `#volume_slider`. Then the default skin background image is removed on the rail.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly/* rail image on the containing box rather than the rail element */
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly#volume_slider {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly background: url("assets/images/sprite.png") no-repeat 0 -259px;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly height: 116px;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly padding-top: 9px;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly#volume_slider .yui3-slider-rail {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly background-image: none;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly#volume_slider .yui3-slider-thumb {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly height: 17px;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly overflow: hidden;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly#volume_slider .yui3-slider-thumb img {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly position: absolute;
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>You can see the full CSS and JavaScript for the other controls in the <a href="#full_code_listing">Full Code Listing</a> below.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h3 id="full_code_listing">Full Code Listing</h3>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<p>Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls, and CSS for placing the Slider and setting up the volume icon sprite positioning.</p>
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h4>Markup</h4>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-from-markup-html}}
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h4 id="full_js">JavaScript</h4>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-from-markup-js}}
7a6a57d5b030103b5b64157208acbecbfe4118b1Jenny Donnelly<h4 id="full_css">CSS</h4>
a1e26dba97702175f8ab0531c41214d8f4704e0cLuke Smith{{>slider-from-markup-css}}