Volume

With Sliders, we can give the user control of things like Volume, Seek, or Equalizer bands. Most Sliders consist of the actual Slider and a Layer underneath to visibly cue the user as to the range that they can drag the Slider. To see how these two Objects work together, let's put the easiest Slider to explain, the Volume, into our Display Group right next to the Timer we made in the previous section.

<layer id="VolumeBar" image="player.normal.volumebar" x="98" y="11"/>
<Slider
   id="Volume"
   action="VOLUME"
   x="98" y="9"
   w="37" h="6"
   thumb="player.normal.slider"
   downThumb="player.normal.slider"
   orientation="horizontal"
/>

The graphics used here are very basic because later the Sliders are going to be replaced with Animated Sliders using MAKI. The Layer is just a standard Layer, nothing new or special about it. Our new Object, however, has a few things that need explaining. The first thing we should note is the action and its value "VOLUME". This tells Winamp what to do when the Slider is moved, which in this case would be to change the volume. Next, let's look at the thumb and downThumb. These behave much like the image and downImage of a Button, thumb is usually shown unless the Slider is being used, then downThumb is shown. Like Buttons, there is also a Parameter for when the mouse is over the Slider, hoverThumb. The last Parameter, orientation, determines whether the Slider works up and down or side to side. Possible values are: "H", "horizontal", "V", and "vertical".

Before continuing, we should address how the position and size of the Slider were chosen. For a horizontal Slider, the easiest two values are x and h. x comes directly from the Layer, since this is normally the leftmost edge the Slider can move to. h is just the height of the thumb image used. The width of the Slider, w, is usually, as in this example, the width of the image used for the underlying Layer. The y value is determined by a little math. We take the height of our thumb, 6, and subtract from it the height of our Layer, 2. If the difference is greater than "0", like 4, we then divide it by 2. Then we subtract whatever we get here, in our case 2, from the y value of our Layer. Using this little bit of math will make sure that your Slider and its thumb are properly centered over the Layer.

Seek

The Seek Slider is actually composed of two Sliders, one very similar to the Volume Slider and one known as the Seeker Ghost. Also, as with the Volume, the Seek should usually have a Layer underneath to show its range. Here is what the regular Seek Slider and its Layer look like for the tutorial skin:

<layer id="SeekBar" image="player.normal.seekbar" x="18" y="36"/>
<Slider
   id="Seeker"
   action="SEEK"
   x="18" y="34"
   w="110" h="6"
   thumb="player.normal.slider"
   downThumb="player.normal.slider"
   orientation="horizontal"
/>

Aside from the new action, the Seek Slider is nearly identical to the Volume Slider. The Seek will function as is, but most skinners also like include the helpful Seeker Ghost.

Seeker Ghost

The Seeker Ghost is another Seek Slider that makes the Seek function more useful. The Seeker Ghost is effectively a second Slider right on top of the regular Seek Slider. When the user clicks and drags the Seek, they are really clicking and dragging the Seeker Ghost. This allows the original Seek to remain in its current position as a reference. When the Seeker Ghost is released, the song and the Seek Slider will update to the new position. Let's add the Seeker Ghost into our Display Group just after our regular Seek and see what we have so far:

<Slider
   id="SeekerGhost"
   action="SEEK"
   x="18" y="34"
   w="110" h="6"
   thumb="player.normal.slider"
   downThumb="player.normal.slider"
   orientation="horizontal"
/>

Towards the end of the Beginner section, we'll include a pre-made MAKI script that will alter the Seeker Ghost's behavior to better suit the name. For now, though, let's go on to the next section and find out how to implement ToggleButtons.