d5b7ba26785d7494166d48876362ba30ff30b98awrowe<style scoped>

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames #demo {

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames background: #fff;

5541a81e194dc99521c0ecf904a940b0b65a93f2nd border: 1px solid #999;

fc25339741311efd7d460f18b6287ef38d76bbe6madhum color: #000;

fc25339741311efd7d460f18b6287ef38d76bbe6madhum }

fc25339741311efd7d460f18b6287ef38d76bbe6madhum

fc25339741311efd7d460f18b6287ef38d76bbe6madhum #demo .demo-content {

fcdca175a52fe517f2317ba0e2b6e6d14522b869madhum padding: 1ex 1em;

fcdca175a52fe517f2317ba0e2b6e6d14522b869madhum }

92a2439559cf1161742650ed9c50c6483bd029cemadhum

92a2439559cf1161742650ed9c50c6483bd029cemadhum #volume_control {

92a2439559cf1161742650ed9c50c6483bd029cemadhum height: 25px;

92a2439559cf1161742650ed9c50c6483bd029cemadhum line-height: 25px;

0d60370bedd05f9632f54e85c417ce472d463674madhum background: url("assets/images/sprite.png") repeat-x 0 0;

0d60370bedd05f9632f54e85c417ce472d463674madhum position: relative;

0d60370bedd05f9632f54e85c417ce472d463674madhum }

0d60370bedd05f9632f54e85c417ce472d463674madhum

ebecc16986604cce1369d5075eff65032e3dd0deianh #volume_control label {

0d60370bedd05f9632f54e85c417ce472d463674madhum font-weight: bold;

ebecc16986604cce1369d5075eff65032e3dd0deianh margin: 0 1ex 0 1em;

764315969cef40e50cdc6a5e9638454e10c1c06end zoom: 1;

764315969cef40e50cdc6a5e9638454e10c1c06end }

764315969cef40e50cdc6a5e9638454e10c1c06end

764315969cef40e50cdc6a5e9638454e10c1c06end #volume {

d470ccf962533e14bd6f7265f18840f1397034eend border: 1px inset #999;

d470ccf962533e14bd6f7265f18840f1397034eend height: 16px;

d470ccf962533e14bd6f7265f18840f1397034eend margin-top: 3px;

d470ccf962533e14bd6f7265f18840f1397034eend padding: 0 3px;

d470ccf962533e14bd6f7265f18840f1397034eend text-align: right;

3de8d8649277a02f53aa4f06121420985e8eee08nd width: 2em;

3de8d8649277a02f53aa4f06121420985e8eee08nd }

3de8d8649277a02f53aa4f06121420985e8eee08nd

3de8d8649277a02f53aa4f06121420985e8eee08nd /* Support open/close action for the slider */

3de8d8649277a02f53aa4f06121420985e8eee08nd #demo .volume-hide #volume_slider {

3de8d8649277a02f53aa4f06121420985e8eee08nd display: none;

4ac3e76f96ca3a5d0f67ae5cbe637c18f7280458gregames }

4ac3e76f96ca3a5d0f67ae5cbe637c18f7280458gregames

4ac3e76f96ca3a5d0f67ae5cbe637c18f7280458gregames #volume_icon {

bfb54bd96690887dcdf184fd9083c2e167898ce2nd background: url("assets/images/sprite.png") no-repeat 0 -25px;

a2c036f0ca71e35c085b4cd9451a6d3718bc65daake border: 0 none;

a2c036f0ca71e35c085b4cd9451a6d3718bc65daake height: 25px;

a2c036f0ca71e35c085b4cd9451a6d3718bc65daake vertical-align: top;

a2c036f0ca71e35c085b4cd9451a6d3718bc65daake width: 31px;

fbfb0de5ec8b82ad240074f20184f0cf77b59fb3nd }

fbfb0de5ec8b82ad240074f20184f0cf77b59fb3nd

fbfb0de5ec8b82ad240074f20184f0cf77b59fb3nd /* move the button text offscreen left */

fbfb0de5ec8b82ad240074f20184f0cf77b59fb3nd #volume_icon p {

146bd390ef41ad985a39b6dd8519163796a4d585nd text-indent: -9999px;

146bd390ef41ad985a39b6dd8519163796a4d585nd }

146bd390ef41ad985a39b6dd8519163796a4d585nd

146bd390ef41ad985a39b6dd8519163796a4d585nd /*

b92cba59a0890be43b14aaf1ce30606140be9593nd * adjust the speaker icon sprite in accordance with volume level and

b92cba59a0890be43b14aaf1ce30606140be9593nd * active state

b92cba59a0890be43b14aaf1ce30606140be9593nd */

b92cba59a0890be43b14aaf1ce30606140be9593nd #demo .volume-hide .level_0 { background-position: 0 -25px; }

613d41acb9a6aab66a0e38f1fe0f03c5ca6f3fb5nd #demo .volume-hide .level_1 { background-position: 0 -50px; }

613d41acb9a6aab66a0e38f1fe0f03c5ca6f3fb5nd #demo .volume-hide .level_2 { background-position: 0 -75px; }

613d41acb9a6aab66a0e38f1fe0f03c5ca6f3fb5nd #demo .volume-hide .level_3 { background-position: 0 -100px; }

613d41acb9a6aab66a0e38f1fe0f03c5ca6f3fb5nd

613d41acb9a6aab66a0e38f1fe0f03c5ca6f3fb5nd #demo .level_0,

402d23baca89e8c4fcb4e52ad8b2d66a6904baaetrawick #demo .level_0:hover {

402d23baca89e8c4fcb4e52ad8b2d66a6904baaetrawick background-position: 0 -125px;

402d23baca89e8c4fcb4e52ad8b2d66a6904baaetrawick }

affb82a2d7fc07c1a862d800ef47af966b898768nd #demo .level_1,

affb82a2d7fc07c1a862d800ef47af966b898768nd #demo .level_1:hover {

affb82a2d7fc07c1a862d800ef47af966b898768nd background-position: 0 -150px;

affb82a2d7fc07c1a862d800ef47af966b898768nd }

6d4bfae6836af357a3b9790c0d6a06fdd00f177fnd #demo .level_2,

6d4bfae6836af357a3b9790c0d6a06fdd00f177fnd #demo .level_2:hover {

6d4bfae6836af357a3b9790c0d6a06fdd00f177fnd background-position: 0 -175px;

6d4bfae6836af357a3b9790c0d6a06fdd00f177fnd }

f803e3d3b51b398d24bcc4647a84e537a40c77d6nd #demo .level_3,

f803e3d3b51b398d24bcc4647a84e537a40c77d6nd #demo .level_3:hover {

f803e3d3b51b398d24bcc4647a84e537a40c77d6nd background-position: 0 -200px;

f803e3d3b51b398d24bcc4647a84e537a40c77d6nd }

4caa28863a3418d26cc20a998dc368c3de3b7e19jerenkrantz

4caa28863a3418d26cc20a998dc368c3de3b7e19jerenkrantz #volume_slider {

4caa28863a3418d26cc20a998dc368c3de3b7e19jerenkrantz position: absolute;

07af571d0ef9975db2e79cd01222effd58dbb81ejerenkrantz top: 25px;

07af571d0ef9975db2e79cd01222effd58dbb81ejerenkrantz }

07af571d0ef9975db2e79cd01222effd58dbb81ejerenkrantz

a3f2646ef3d8a3a5234a5601de0f95f10308c2a6jerenkrantz /* rail image on the containing box rather than the rail element */

a3f2646ef3d8a3a5234a5601de0f95f10308c2a6jerenkrantz #volume_slider {

a3f2646ef3d8a3a5234a5601de0f95f10308c2a6jerenkrantz background: url("assets/images/sprite.png") no-repeat 0 -259px;

9e398d701dd430f073ff5418fb720642e064046ajerenkrantz height: 116px;

9e398d701dd430f073ff5418fb720642e064046ajerenkrantz width: 31px;

9e398d701dd430f073ff5418fb720642e064046ajerenkrantz padding-top: 9px;

1a5b9e0071f0c662036250b482d566ad87ff0b4bjerenkrantz cursor: arrow;

1a5b9e0071f0c662036250b482d566ad87ff0b4bjerenkrantz }

1a5b9e0071f0c662036250b482d566ad87ff0b4bjerenkrantz

a7ac9b52c3d9f7ce937f078a0d585023db626c55jerenkrantz #volume_slider .yui3-slider-rail {

a7ac9b52c3d9f7ce937f078a0d585023db626c55jerenkrantz background-image: none;

a7ac9b52c3d9f7ce937f078a0d585023db626c55jerenkrantz width: 31px;

ba6c07204bd224fa5d4cd0e6b8bf256d6daffb74nd }

ba6c07204bd224fa5d4cd0e6b8bf256d6daffb74nd

ba6c07204bd224fa5d4cd0e6b8bf256d6daffb74nd #volume_slider .yui3-slider-thumb {

db5837bbc9bef214303e755fa52122140366cb6fianh height: 17px;

db5837bbc9bef214303e755fa52122140366cb6fianh width: 31px;

db5837bbc9bef214303e755fa52122140366cb6fianh overflow: hidden;

aac2b82fe4f1ac117e2a0702438d6615542642dand }

aac2b82fe4f1ac117e2a0702438d6615542642dand

aac2b82fe4f1ac117e2a0702438d6615542642dand #volume_slider .yui3-slider-thumb img {

a793d402c74e50326a2401cfbdc562c5781948fdnd position: absolute;

a793d402c74e50326a2401cfbdc562c5781948fdnd top: -225px;

0a209fcb17b8c9a42a6149a1758e61cf6527d367nd }

a793d402c74e50326a2401cfbdc562c5781948fdnd

99d360dcbb5ac2be27694be74cc6124dbadf3315jerenkrantz #volume_slider .yui3-slider-disabled .yui3-slider-thumb img {

99d360dcbb5ac2be27694be74cc6124dbadf3315jerenkrantz top: -242px;

99d360dcbb5ac2be27694be74cc6124dbadf3315jerenkrantz }

3ded62d7f2c9b12616d718b8c97d3044baa9ecdbjerenkrantz

3ded62d7f2c9b12616d718b8c97d3044baa9ecdbjerenkrantz #demo_sprite {

3ded62d7f2c9b12616d718b8c97d3044baa9ecdbjerenkrantz display: inline;

031acbd88cdb9051f474a38ef67ca403cb7039b3nd float: left;

031acbd88cdb9051f474a38ef67ca403cb7039b3nd margin-right: 1em;

031acbd88cdb9051f474a38ef67ca403cb7039b3nd }

031acbd88cdb9051f474a38ef67ca403cb7039b3nd</style>

ebf6c41faad84ab037fff4f04ec987463457ef2acoar

ebf6c41faad84ab037fff4f04ec987463457ef2acoar<div class="intro">

ebf6c41faad84ab037fff4f04ec987463457ef2acoar <p>This example illustrates a few points:</p>

ebf6c41faad84ab037fff4f04ec987463457ef2acoar <ol>

ebf6c41faad84ab037fff4f04ec987463457ef2acoar <li>How to create a Slider using existing markup</li>

ab8c0315521735c73ce16c8072f91e17c406ca5bnd <li>How to disable a Slider</li>

ab8c0315521735c73ce16c8072f91e17c406ca5bnd <li>How to use an image sprite to create a custom Slider skin</li>

ab8c0315521735c73ce16c8072f91e17c406ca5bnd </ol>

b9e99e0d3154bbebe3e1b8d11d6c15bde79510a5nd

b9e99e0d3154bbebe3e1b8d11d6c15bde79510a5nd <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>

b9e99e0d3154bbebe3e1b8d11d6c15bde79510a5nd</div>

b9e99e0d3154bbebe3e1b8d11d6c15bde79510a5nd

ea5f8cfbb7ef1d19318f6994c26dd73c38ffd8ddjerenkrantz<div class="example">

ea5f8cfbb7ef1d19318f6994c26dd73c38ffd8ddjerenkrantz {{>slider-from-markup-source}}

ea5f8cfbb7ef1d19318f6994c26dd73c38ffd8ddjerenkrantz</div>

4567cfc6a65328bd3e8dd2b758ca926b389c7058brianp

4567cfc6a65328bd3e8dd2b758ca926b389c7058brianp<h3 id="prog_enh">Progressive Enhancement</h3>

4567cfc6a65328bd3e8dd2b758ca926b389c7058brianp<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>

4cdc5446050c19b9d519a273a129188586e8d445jerenkrantz

4cdc5446050c19b9d519a273a129188586e8d445jerenkrantz<p>The starting markup for the volume control area is as follows:</p>

4cdc5446050c19b9d519a273a129188586e8d445jerenkrantz

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames```

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames<div id="volume_control" class="volume-hide">

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>

c30ef289fe64ac7fedc44cfcc6b439f0f8458b4cgregames

2f408250e9111c4b85b2b4b9b8836e83987efdefstoddard <span id="volume_slider">

2f408250e9111c4b85b2b4b9b8836e83987efdefstoddard <span class="yui3-slider-rail">

2f408250e9111c4b85b2b4b9b8836e83987efdefstoddard <span class="yui3-slider-thumb"><img src="assets/images/sprite.png" height="384" width="31"></span>

2f408250e9111c4b85b2b4b9b8836e83987efdefstoddard </span>

d5b7ba26785d7494166d48876362ba30ff30b98awrowe </span>

47fe07199bddec6124ab7251c6be5c6c9ac00485jerenkrantz

47fe07199bddec6124ab7251c6be5c6c9ac00485jerenkrantz <label for="mute"><input type="checkbox" id="mute"> mute</label>

6646a289c2d4778c8cd43d62b5a1cc966a356f85jerenkrantz</div>

6646a289c2d4778c8cd43d62b5a1cc966a356f85jerenkrantz```

6646a289c2d4778c8cd43d62b5a1cc966a356f85jerenkrantz

6646a289c2d4778c8cd43d62b5a1cc966a356f85jerenkrantz<p>To tell the Slider to use the existing rail and thumb elements, override the `renderRail` and `renderThumb` methods.</p>

aec70520ebe1e33e0d5e83c3626649d2a41dbe68wrowe

aec70520ebe1e33e0d5e83c3626649d2a41dbe68wrowe```

aec70520ebe1e33e0d5e83c3626649d2a41dbe68wrowevar volume = new Y.Slider({

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe axis : 'y',

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe min : 100, // reverse min and max to make the top

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe max : 0, // equal 100 and the bottom 0

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe value : 50,

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawick length: '105px'

144b1e2ebb48b2878017a8ac9a4cad1e771bc1b6stoddard});

144b1e2ebb48b2878017a8ac9a4cad1e771bc1b6stoddard

144b1e2ebb48b2878017a8ac9a4cad1e771bc1b6stoddard// Override renderRail to just return the existing rail node

74b84dd6e146edc93cf1b3200e411bfc581f7c36ndvolume.renderRail = function () {

143a04461642dea548a4bebdb302f5e411528a14trawick return Y.one( "#volume_slider span.yui3-slider-rail" );

143a04461642dea548a4bebdb302f5e411528a14trawick};

143a04461642dea548a4bebdb302f5e411528a14trawick// Override renderThumb to just return the existing thumb node

ebecc16986604cce1369d5075eff65032e3dd0deianhvolume.renderThumb = function () {

ebecc16986604cce1369d5075eff65032e3dd0deianh return this.rail.one( "span.yui3-slider-thumb" );

ebecc16986604cce1369d5075eff65032e3dd0deianh};

ebecc16986604cce1369d5075eff65032e3dd0deianh

ebecc16986604cce1369d5075eff65032e3dd0deianhvolume.render( "#volume_slider" );

ebecc16986604cce1369d5075eff65032e3dd0deianh```

ebecc16986604cce1369d5075eff65032e3dd0deianh

ebecc16986604cce1369d5075eff65032e3dd0deianh<h3 id="syncui">Hide and show the Slider</h3>

7a2b9ea4788ea59d81b9e84192e4b90a9a0da875wrowe<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>

7a2b9ea4788ea59d81b9e84192e4b90a9a0da875wrowe

7a2b9ea4788ea59d81b9e84192e4b90a9a0da875wrowe```

7a2b9ea4788ea59d81b9e84192e4b90a9a0da875wrowevar control = Y.one('#volume_control'),

7a2b9ea4788ea59d81b9e84192e4b90a9a0da875wrowe icon = Y.one('#volume_icon'),

d225a894172ec361d2c6791638bacf604a8c6fa4nd open = false;

d225a894172ec361d2c6791638bacf604a8c6fa4nd

d225a894172ec361d2c6791638bacf604a8c6fa4ndfunction showHideSlider(e) {

d225a894172ec361d2c6791638bacf604a8c6fa4nd control.toggleClass('volume-hide');

d225a894172ec361d2c6791638bacf604a8c6fa4nd open = !open;

d225a894172ec361d2c6791638bacf604a8c6fa4nd

d225a894172ec361d2c6791638bacf604a8c6fa4nd if (e) {

70f28b17978da5478a97843ab7cbcb4baf7a8711nd e.preventDefault();

70f28b17978da5478a97843ab7cbcb4baf7a8711nd }

70f28b17978da5478a97843ab7cbcb4baf7a8711nd}

70f28b17978da5478a97843ab7cbcb4baf7a8711nd

ac539bd6714277d9ce7c39361de4cc11d1fb8eadndicon.on('click', showHideSlider);

ac539bd6714277d9ce7c39361de4cc11d1fb8eadnd

ac539bd6714277d9ce7c39361de4cc11d1fb8eadnd// Also support hiding the Slider when the user clicks outside the

f5208b93c14accca0cd5f5acb042332b20172fb1nd// Slider element.

f5208b93c14accca0cd5f5acb042332b20172fb1ndfunction handleDocumentClick(e) {

f5208b93c14accca0cd5f5acb042332b20172fb1nd if (open && !icon.contains(e.target) &&

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes !volume.get('boundingBox').contains(e.target)) {

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes showHideSlider();

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes }

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes}

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholesY.one( 'doc' ).on('click', handleDocumentClick );

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes```

1125f364c5cb4fd9bff71e89b5d4cbf551590035bnicholes

9d999c5deeddad9211695fc736a845afda6a2e95wrowe<h3 id="demo_mute">Mute and unmute</h3>

9d999c5deeddad9211695fc736a845afda6a2e95wrowe<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>

9d999c5deeddad9211695fc736a845afda6a2e95wrowe

9d999c5deeddad9211695fc736a845afda6a2e95wrowe```

f19141958ebbfa8feb78e27007b4023d710d1c7etrawickvar volInput = Y.one('#volume'),

f19141958ebbfa8feb78e27007b4023d710d1c7etrawick mute = Y.one('#mute'),

f19141958ebbfa8feb78e27007b4023d710d1c7etrawick beforeMute = 0;

f19141958ebbfa8feb78e27007b4023d710d1c7etrawick

3ac9911bdb9c066a068041218d5b05bc851340bdtrawickfunction muteVolume(e) {

3ac9911bdb9c066a068041218d5b05bc851340bdtrawick // Set disabled to false if currently true; true if currently false

3ac9911bdb9c066a068041218d5b05bc851340bdtrawick var disabled = !volume.get('disabled');

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz volume.set('disabled', disabled);

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz if (disabled) {

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz beforeMute = volume.getValue();

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz volume.setValue(0);

c5c445b5614e4d5040d3c0994d2456f1ac8cb9b5jerenkrantz volInput.set('disabled','disabled');

5541a81e194dc99521c0ecf904a940b0b65a93f2nd } else {

5541a81e194dc99521c0ecf904a940b0b65a93f2nd volume.setValue(beforeMute);

5541a81e194dc99521c0ecf904a940b0b65a93f2nd volInput.set('disabled','');

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe }

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe}

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowemute.on('click', muteVolume);

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe```

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe<h3>Skinning and CSS</h3>

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe<img id="demo_sprite" src="assets/images/sprite.png" height="384" width="31" alt="Sprite of all custom image resources for this example">

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe<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>

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe

f16b2c3124a11bff93724342099e1afdb8145917bnicholes<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&#8212;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>

f16b2c3124a11bff93724342099e1afdb8145917bnicholes

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe```

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe/* rail image on the containing box rather than the rail element */

60736084c3e45fe7ece48483188e58b0f9e3a36bwrowe#volume_slider {

f16b2c3124a11bff93724342099e1afdb8145917bnicholes background: url("assets/images/sprite.png") no-repeat 0 -259px;

d584e3b7a33da68233e7ac403213b436b402f5bend height: 116px;

d584e3b7a33da68233e7ac403213b436b402f5bend width: 31px;

d584e3b7a33da68233e7ac403213b436b402f5bend padding-top: 9px;

d584e3b7a33da68233e7ac403213b436b402f5bend}

d584e3b7a33da68233e7ac403213b436b402f5bend

d584e3b7a33da68233e7ac403213b436b402f5bend#volume_slider .yui3-slider-rail {

d584e3b7a33da68233e7ac403213b436b402f5bend background-image: none;

d584e3b7a33da68233e7ac403213b436b402f5bend width: 31px;

d584e3b7a33da68233e7ac403213b436b402f5bend}

d584e3b7a33da68233e7ac403213b436b402f5bend

d584e3b7a33da68233e7ac403213b436b402f5bend#volume_slider .yui3-slider-thumb {

d584e3b7a33da68233e7ac403213b436b402f5bend height: 17px;

d584e3b7a33da68233e7ac403213b436b402f5bend width: 31px;

d584e3b7a33da68233e7ac403213b436b402f5bend overflow: hidden;

d584e3b7a33da68233e7ac403213b436b402f5bend}

d584e3b7a33da68233e7ac403213b436b402f5bend

d584e3b7a33da68233e7ac403213b436b402f5bend#volume_slider .yui3-slider-thumb img {

d584e3b7a33da68233e7ac403213b436b402f5bend position: absolute;

d584e3b7a33da68233e7ac403213b436b402f5bend top: -225px;

d584e3b7a33da68233e7ac403213b436b402f5bend}

3e49fe84a5024d831ffb14697747c5948821f958trawick

3e49fe84a5024d831ffb14697747c5948821f958trawick#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {

3e49fe84a5024d831ffb14697747c5948821f958trawick top: -242px;

5610fc134df70e725bcdef518cc93de70261eb1dnd}

5610fc134df70e725bcdef518cc93de70261eb1dnd```

5610fc134df70e725bcdef518cc93de70261eb1dnd

5610fc134df70e725bcdef518cc93de70261eb1dnd<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>

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick<h3 id="full_code_listing">Full Code Listing</h3>

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick<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>

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick<h4>Markup</h4>

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick```

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick<div id="demo">

965680cd7c050ec8c8c751ffdbaf19c91213d562trawick

52d61f96a186861d991583851218e15ea16f0abetrawick <div id="volume_control" class="volume-hide">

52d61f96a186861d991583851218e15ea16f0abetrawick <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">

52d61f96a186861d991583851218e15ea16f0abetrawick <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>

52d61f96a186861d991583851218e15ea16f0abetrawick <span id="volume_slider">

4fa5f4378779a06834ec5efa44810f93741c5f27wrowe <span class="yui3-slider-rail">

4fa5f4378779a06834ec5efa44810f93741c5f27wrowe <span class="yui3-slider-thumb"><img src="assets/images/sprite.png" height="384" width="31"></span>

4fa5f4378779a06834ec5efa44810f93741c5f27wrowe </span>

4fa5f4378779a06834ec5efa44810f93741c5f27wrowe </span>

4fa5f4378779a06834ec5efa44810f93741c5f27wrowe <label for="mute"><input type="checkbox" id="mute"> mute</label>

74b84dd6e146edc93cf1b3200e411bfc581f7c36nd </div>

74b84dd6e146edc93cf1b3200e411bfc581f7c36nd

74b84dd6e146edc93cf1b3200e411bfc581f7c36nd <div class="demo-content">

11e365512cbf021726cd3ec3d80743f408170ff9stoddard <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>

11e365512cbf021726cd3ec3d80743f408170ff9stoddard <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>

11e365512cbf021726cd3ec3d80743f408170ff9stoddard </div>

11e365512cbf021726cd3ec3d80743f408170ff9stoddard</div>

11e365512cbf021726cd3ec3d80743f408170ff9stoddard```

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawick

2774f23eee36fdb1b30a8213bbcabe5336175e54jwoolley<h4 id="full_js">JavaScript</h4>

2774f23eee36fdb1b30a8213bbcabe5336175e54jwoolley```

2774f23eee36fdb1b30a8213bbcabe5336175e54jwoolleyYUI().use("slider", function (Y) {

2774f23eee36fdb1b30a8213bbcabe5336175e54jwoolley

1944ddbbad413b60307d66081b022a3eee5f04cfbnicholesvar control = Y.one('#volume_control'),

1944ddbbad413b60307d66081b022a3eee5f04cfbnicholes volInput = Y.one('#volume'),

1944ddbbad413b60307d66081b022a3eee5f04cfbnicholes icon = Y.one('#volume_icon'),

1944ddbbad413b60307d66081b022a3eee5f04cfbnicholes mute = Y.one('#mute'),

3b1dc8f8f153d7167da9e64ab44f3e90f486a458wrowe open = false,

3b1dc8f8f153d7167da9e64ab44f3e90f486a458wrowe level = 2,

3b1dc8f8f153d7167da9e64ab44f3e90f486a458wrowe beforeMute = 0,

3b1dc8f8f153d7167da9e64ab44f3e90f486a458wrowe wait,

2404b81d39a1a539f980d4808d52d23997a9e006nd volume;

2404b81d39a1a539f980d4808d52d23997a9e006nd

2404b81d39a1a539f980d4808d52d23997a9e006nd// The style.top is known because of a fixed height control bar, but the

a3754e9d2edd5758f94fd743b9cf9f814be80383nd// style.left remains unknown until run time.

a3754e9d2edd5758f94fd743b9cf9f814be80383ndY.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

a3754e9d2edd5758f94fd743b9cf9f814be80383nd

f9a987f71572291f35b9d0adc3fe79af96b2b147trawickvolume = new Y.Slider({

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick axis : 'y',

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick min : 100,

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick max : 0,

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick value : 50,

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick length: '105px'

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick});

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick

f9a987f71572291f35b9d0adc3fe79af96b2b147trawickvolume.renderRail = function () {

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick return Y.one( "#volume_slider span.yui3-slider-rail" );

f9a987f71572291f35b9d0adc3fe79af96b2b147trawick};

5c870e08d589a24283cd76a9d596120605762cbbminfrinvolume.renderThumb = function () {

5c870e08d589a24283cd76a9d596120605762cbbminfrin return this.rail.one( "span.yui3-slider-thumb" );

5c870e08d589a24283cd76a9d596120605762cbbminfrin};

47d4dfaca60aff6d3c7e591bf593b3961cafcdefminfrin

47d4dfaca60aff6d3c7e591bf593b3961cafcdefminfrinvolume.render( "#volume_slider" );

47d4dfaca60aff6d3c7e591bf593b3961cafcdefminfrin

c206205e2475a7a4a192eaa7190a9894f01f0631minfrin// Initialize event listeners

c206205e2475a7a4a192eaa7190a9894f01f0631minfrinvolume.after('valueChange', updateInput);

c206205e2475a7a4a192eaa7190a9894f01f0631minfrinvolume.after('valueChange', updateIcon);

c206205e2475a7a4a192eaa7190a9894f01f0631minfrin

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawickmute.on('click', muteVolume);

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawick

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawickvolInput.on({

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawick keydown : handleInput,

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawick keyup : updateVolume

304aee4b1ff85cc876570493e4ed334d42b4d9eftrawick});

77582a85f880a10e8e225ecd5b303446d23d1c9atrawick

77582a85f880a10e8e225ecd5b303446d23d1c9atrawickicon.on('click', showHideSlider);

77582a85f880a10e8e225ecd5b303446d23d1c9atrawick

77582a85f880a10e8e225ecd5b303446d23d1c9atrawickY.one( 'doc' ).on('click', handleDocumentClick );

77582a85f880a10e8e225ecd5b303446d23d1c9atrawick

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe// Support functions

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowefunction updateInput(e) {

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe if (e.src !== 'KEY') {

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe volInput.set('value',e.newVal);

111b2312c9749936ebca4f273db445820a0a703ebrianp }

111b2312c9749936ebca4f273db445820a0a703ebrianp}

111b2312c9749936ebca4f273db445820a0a703ebrianp

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawickfunction updateIcon(e) {

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawick var newLevel = e.newVal && Math.ceil(e.newVal / 34);

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawick

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawick if (level !== newLevel) {

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawick icon.replaceClass('level_'+level, 'level_'+newLevel);

ad877cddc14be8c8171938ba61338c6c7b896bbdtrawick level = newLevel;

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawick }

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawick}

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawick

367cefc17f8dcfe65651c9c16cb3151589c6cecetrawickfunction muteVolume(e) {

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe var disabled = !volume.get('disabled');

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe volume.set('disabled', disabled);

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe if (disabled) {

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe beforeMute = volume.getValue();

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe volume.setValue(0);

f49cf8ce86a01c90d5d843fc27e19d2802dd0f77wrowe volInput.set('disabled','disabled');

9b867bfaea269f387a0cf2aa4c9f38d4d51bac94rederpj } else {

9b867bfaea269f387a0cf2aa4c9f38d4d51bac94rederpj volume.setValue(beforeMute);

9b867bfaea269f387a0cf2aa4c9f38d4d51bac94rederpj volInput.set('disabled','');

9b867bfaea269f387a0cf2aa4c9f38d4d51bac94rederpj }

9b867bfaea269f387a0cf2aa4c9f38d4d51bac94rederpj}

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowefunction handleInput(e) {

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe // Allow only numbers and various other control keys

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe if (e.keyCode > 57) {

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe e.halt();

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe }

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe}

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowe

52435ceaabd1670b2c3a062acc191159a64fb7a1wrowefunction updateVolume(e) {

e199d79647c689a85951f19b08a08082263f4df8brianp // delay input processing to give the user time to type

e199d79647c689a85951f19b08a08082263f4df8brianp if (wait) {

e199d79647c689a85951f19b08a08082263f4df8brianp wait.cancel();

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe }

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe wait = Y.later(400, null, function () {

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe var value = parseInt(volInput.get('value'),10) || 0;

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe if (value > 100) {

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe volInput.set('value', 100);

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe value = 100

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe }

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe volume.setValue( value );

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe });

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe}

ad451e2e428a069086d1c18c9e3372f8846ec617wrowe

1e1e5c477f92840ffbcb8acd0003305022e5468atrawickfunction showHideSlider(e) {

1e1e5c477f92840ffbcb8acd0003305022e5468atrawick control.toggleClass('volume-hide');

1e1e5c477f92840ffbcb8acd0003305022e5468atrawick open = !open;

1e1e5c477f92840ffbcb8acd0003305022e5468atrawick

1e1e5c477f92840ffbcb8acd0003305022e5468atrawick if (e) {

1e1e5c477f92840ffbcb8acd0003305022e5468atrawick e.preventDefault();

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpj }

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpj}

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpj

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpjfunction handleDocumentClick(e) {

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpj if (open && !icon.contains(e.target) &&

c998c5be82bf2b41f8fc27de9376ba10651c74bcrederpj !volume.get('boundingBox').contains(e.target)) {

58eb8d7cca552570577aa8b636349a695ff193datrawick showHideSlider();

58eb8d7cca552570577aa8b636349a695ff193datrawick }

58eb8d7cca552570577aa8b636349a695ff193datrawick}

58eb8d7cca552570577aa8b636349a695ff193datrawick

ecf435f0c6379df7ed83285d5597fc9aa39c6f6dbrianp});

ecf435f0c6379df7ed83285d5597fc9aa39c6f6dbrianp```

ecf435f0c6379df7ed83285d5597fc9aa39c6f6dbrianp

ecf435f0c6379df7ed83285d5597fc9aa39c6f6dbrianp<h4 id="full_css">CSS</h4>

480f2a1b2fb27a8284e66e60a5bbaee6bc1ccb04trawick```

480f2a1b2fb27a8284e66e60a5bbaee6bc1ccb04trawick#demo {

480f2a1b2fb27a8284e66e60a5bbaee6bc1ccb04trawick background: #fff;

480f2a1b2fb27a8284e66e60a5bbaee6bc1ccb04trawick border: 1px solid #999;

acc9093ae1f3c97acc635bd5b2c7c0969da21183trawick color: #000;

acc9093ae1f3c97acc635bd5b2c7c0969da21183trawick}

acc9093ae1f3c97acc635bd5b2c7c0969da21183trawick

2fa5f4c38890220c6ea439317e7dcb9e8b3c76f7jwoolley#demo .demo-content {

2fa5f4c38890220c6ea439317e7dcb9e8b3c76f7jwoolley padding: 1ex 1em;

2fa5f4c38890220c6ea439317e7dcb9e8b3c76f7jwoolley}

95d00ea81131488769296fa5765ed745cbf45207trawick

95d00ea81131488769296fa5765ed745cbf45207trawick#volume_control {

95d00ea81131488769296fa5765ed745cbf45207trawick height: 25px;

95d00ea81131488769296fa5765ed745cbf45207trawick line-height: 25px;

95d00ea81131488769296fa5765ed745cbf45207trawick background: url("assets/images/sprite.png") repeat-x 0 0;

95d00ea81131488769296fa5765ed745cbf45207trawick position: relative;

95d00ea81131488769296fa5765ed745cbf45207trawick}

95d00ea81131488769296fa5765ed745cbf45207trawick

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj#volume_control label {

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj font-weight: bold;

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj margin: 0 1ex 0 1em;

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj zoom: 1;

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj}

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj#volume {

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj border: 1px inset #999;

f08574f1098defdf1dc7e7f18a1e3664ee157150rederpj height: 16px;

84854ca5d35fb9f101da948858097c88457eece8coar margin-top: 3px;

84854ca5d35fb9f101da948858097c88457eece8coar padding: 0 3px;

84854ca5d35fb9f101da948858097c88457eece8coar text-align: right;

84854ca5d35fb9f101da948858097c88457eece8coar width: 2em;

30990c446eca5b0d16d42171a6b30da9456ff6b4trawick}

30990c446eca5b0d16d42171a6b30da9456ff6b4trawick

30990c446eca5b0d16d42171a6b30da9456ff6b4trawick/* Support open/close action for the slider */

0fd9de72e2a1be5a6134ee70703324be80d816b7trawick#demo .volume-hide #volume_slider {

0fd9de72e2a1be5a6134ee70703324be80d816b7trawick display: none;

0fd9de72e2a1be5a6134ee70703324be80d816b7trawick}

0fd9de72e2a1be5a6134ee70703324be80d816b7trawick

2213cc395cb461faf7bfeb187ebb61d97cd457efjerenkrantz#volume_icon {

f36d2c405b5a9bcc22c67577995560e7d1b616c0aaron background: url("assets/images/sprite.png") no-repeat 0 -25px;

2213cc395cb461faf7bfeb187ebb61d97cd457efjerenkrantz border: 0 none;

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe height: 25px;

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe vertical-align: top;

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe width: 31px;

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe}

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe/* move the button text offscreen left */

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe#volume_icon p {

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe text-indent: -9999px;

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe}

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe/*

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe * adjust the speaker icon sprite in accordance with volume level and

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe * active state

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe*/

854c7bc4128fa2ad9fdfe0fc307d5ef30bcb5bb9wrowe#demo .volume-hide .level_0 { background-position: 0 -25px; }

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj#demo .volume-hide .level_1 { background-position: 0 -50px; }

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj#demo .volume-hide .level_2 { background-position: 0 -75px; }

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj#demo .volume-hide .level_3 { background-position: 0 -100px; }

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj#demo .level_0,

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj#demo .level_0:hover {

75f8e1cae5ca3a16a7400cdddf604815ab06b5a8rederpj background-position: 0 -125px;

7f481efe04fdc4da7a447c14be62c155cbe00ddbbrianp}

7f481efe04fdc4da7a447c14be62c155cbe00ddbbrianp#demo .level_1,

7f481efe04fdc4da7a447c14be62c155cbe00ddbbrianp#demo .level_1:hover {

7f481efe04fdc4da7a447c14be62c155cbe00ddbbrianp background-position: 0 -150px;

9ed34e5219ab3506ccfd2ca58751ce4c81b263a8rederpj}

9ed34e5219ab3506ccfd2ca58751ce4c81b263a8rederpj#demo .level_2,

9ed34e5219ab3506ccfd2ca58751ce4c81b263a8rederpj#demo .level_2:hover {

9ed34e5219ab3506ccfd2ca58751ce4c81b263a8rederpj background-position: 0 -175px;

23b36269d124e7a6aaa5221891f7ae2ef3eeb158jerenkrantz}

23b36269d124e7a6aaa5221891f7ae2ef3eeb158jerenkrantz#demo .level_3,

23b36269d124e7a6aaa5221891f7ae2ef3eeb158jerenkrantz#demo .level_3:hover {

d401ff3af66624a7023460054519070a025d31cfwrowe background-position: 0 -200px;

d401ff3af66624a7023460054519070a025d31cfwrowe}

d401ff3af66624a7023460054519070a025d31cfwrowe

d401ff3af66624a7023460054519070a025d31cfwrowe#volume_slider {

e65b56dc229f063425fac589002e34c8246ad878trawick position: absolute;

e65b56dc229f063425fac589002e34c8246ad878trawick top: 25px;

e65b56dc229f063425fac589002e34c8246ad878trawick}

e65b56dc229f063425fac589002e34c8246ad878trawick

306bd64cf6568149964abdf8ca748a617ed98500gregames/* rail image on the containing box rather than the rail element */

306bd64cf6568149964abdf8ca748a617ed98500gregames#volume_slider {

306bd64cf6568149964abdf8ca748a617ed98500gregames background: url("assets/images/sprite.png") no-repeat 0 -259px;

5bd562b1d7da51cb5715899d32bb4c79c54459b0wrowe height: 116px;

ae3d212043d50288748fe9fdf0aa1a3e8f2ff3a6wrowe width: 31px;

ae3d212043d50288748fe9fdf0aa1a3e8f2ff3a6wrowe padding-top: 9px;

ae3d212043d50288748fe9fdf0aa1a3e8f2ff3a6wrowe cursor: arrow;

ae3d212043d50288748fe9fdf0aa1a3e8f2ff3a6wrowe}

ae3d212043d50288748fe9fdf0aa1a3e8f2ff3a6wrowe

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick#volume_slider .yui3-slider-rail {

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick background-image: none;

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick width: 31px;

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick}

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick

766c20b0366e1d0e359e0d9a834669e19a4db3d9trawick#volume_slider .yui3-slider-thumb {

2a6e98ba4ffa30ded5d8831664c5cb2a170a56b6coar height: 17px;

2a6e98ba4ffa30ded5d8831664c5cb2a170a56b6coar width: 31px;

2a6e98ba4ffa30ded5d8831664c5cb2a170a56b6coar overflow: hidden;

2a6e98ba4ffa30ded5d8831664c5cb2a170a56b6coar}

9a11fa4e07f50f2e5750d078ef3751ddbf441b8ftrawick

9a11fa4e07f50f2e5750d078ef3751ddbf441b8ftrawick#volume_slider .yui3-slider-thumb img {

9a11fa4e07f50f2e5750d078ef3751ddbf441b8ftrawick position: absolute;

1f279dc92a60df9f61bf58468162aab0eef072e4brianp top: -225px;

1f279dc92a60df9f61bf58468162aab0eef072e4brianp}

1f279dc92a60df9f61bf58468162aab0eef072e4brianp

1f279dc92a60df9f61bf58468162aab0eef072e4brianp#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {

2fd0edbd8b2f47a8458322bedd3b82f825faf336trawick top: -242px;

2fd0edbd8b2f47a8458322bedd3b82f825faf336trawick}

2fd0edbd8b2f47a8458322bedd3b82f825faf336trawick

39021cf8b495cdb94013ca73531ccb32658fb793rederpj#demo_sprite {

39021cf8b495cdb94013ca73531ccb32658fb793rederpj display: inline;

39021cf8b495cdb94013ca73531ccb32658fb793rederpj float: left;

39021cf8b495cdb94013ca73531ccb32658fb793rederpj margin-right: 1em;

39021cf8b495cdb94013ca73531ccb32658fb793rederpj}

39021cf8b495cdb94013ca73531ccb32658fb793rederpj```

39021cf8b495cdb94013ca73531ccb32658fb793rederpj

39021cf8b495cdb94013ca73531ccb32658fb793rederpj