This example demonstrates how to build a unique looking slider control out of pieces of XHTML and Jitsu markup - with no script at all.

Background

This slider contains a div whose class is set to "MySlider_div" - that's the guy that picks up the background image for the slider, from the CSS rule:

    .MySlider_div { 
        background-image: url(/jitsu/quicktours/images/slider_bg.gif);
        width:160px;
        height: 40px;
    }
    

Here's what "slider_bg.gif" looks like:

Buttons

The slider consists of two buttons - an increment and a decrement button (the plus and minus signs).

Here's the code for the increment button:

    <j:Button bubbleEvent="decrement"> class="MySlider_minus"/>
        +
    </j:Button>
    

The buttons "bubble" up events - either the increment or decrement events - which are then caught and acted on by the enclosing Slider control.

The buttons are positioned using two style classes in the stylesheet. Heres the class for plus:

    
    .MySlider_plus {
        position: relative;
        left: 90px;
        top: 2px;
        height: 20px;
    }
    

We use relative positioning because we want the images to be positioned relative to the slider itself - if the slider moves the buttons should move too.

Thumb

The slider also has a "SliderThumb" - that's the object that the user drags to change the slider value.

    <div style="position:relative; width: 140px; left: 10px; ">
        <j:SliderThumb style="position:absolute; width:17px;">    
            <img src="/jitsu/quicktours/images/slider_knob.gif"/>
        </j:SliderThumb>
    </div>                
    

Here's the slider_knob.gif image for the thumb:

CSS Positioning Magic

There is a little bit of "CSS magic" going on here. First, we create a <div>, positioned relative to the slider itself, and with a fixed width of 140px, and offset by 10 pixels on the left. That fits inside the image we made for the background):

    <div style="position:relative; width: 140px; left: 10px; ">
    

Then, inside the <div>, we position the <SliderThumb>, whose style is set to absolute positioning, and whose width is the width of the nested thumb knob image.

    <j:SliderThumb style="position:absolute; width:17px;">    
    

Using an absolutely positioned <SliderThumb> inside a relatively positioned <div> container gives us the kind of behavior we want: the <div> is positioned with respect to the location of the slider control - if the slider moves on the page the div goes with it. However, the thumb needs to be positioned absolutely so that the controller can position the thumb correctly when the mouse moves.

Essentially, the outer div creates a horizontal track which the inner thumb can move left and right in.