In this example we take the markup we used in A Custom Slider and turn it into a custom control.

At the same time, we've added a label to the slider control.

The result is a custom-looking reusable slider control that supports a label, css, behavior and databinding, all within markup!

Defining the control

First we define a subclass control which extends Slider:

    <j:module targetNamespace="urn:example">

      <j:control name="MySlider" base="j:Slider">

        <j:defaults>    
          <div class="MySlider_div">
            ... rest of myslider markup in here
          </div>
        <j:defaults>    

      </j:control>

    </j:module>
    

This markup "subclasses" the system slider class - it extends the system slider's behavior but adds a different appearance. The new Slider control has all the same properties and behavior as the system Slider, but with a different look.

Adding the Label

To add the label we defined a style rule for the label:

    
    .MySlider_label {
        position:relative; 
        left: 30px;
        top:0px;
        font-family: arial;
        color: white;
    }
    

and then put a Label control inside the slider:

    <div class="MySlider_div">
        ...
        <j:Label class="MySlider_label" text="#param(text)"/>
        ...
    </div>
    

That's it. Now we have a custom data-bindable reusable slider control, which we instantiate using:

   
        <ex:MySlider minimum="1" maximum="10" step="1" text="rating"/>

        <ex:MySlider minimum="1" maximum="10" step="1" text="appeal"/>