Building Slider Bar Controls

You can use the CFSLIDER control to create a slider control and define a wide range of formatting options for slider label text, , colors for the groove in which the slider knob moves, label font name, size, boldface, italics, and color, as well as slider scale increments, range, positioning, and behavior.

As with CFTREE and CFGRID, input valication can be serviced with a JavaScript specified in the ONVALIDATE attribute.

Note To create a slider control:
  1. Create a new file in Studio.
  2. Modify the file so that it appears a follows:
    <CFFORM NAME="Form1" ACTION="submit.cfm"
        METHOD="Post">
    
        <CFSLIDER NAME="myslider"
            GROOVECOLOR="black"
            BGCOLOR="white"
            TEXTCOLOR="black"
            FONT="Trebuchet MS"
            BOLD="yes"
            RANGE="0,1000"
            SCALE="10"
            VALUE="640"
            FONTSIZE="24"
            LABEL="Slider %value%"
            WIDTH="400">
    
    </CFFORM>
    
  3. Save the file as slider.cfm and view it in your browser.

CFSLIDER form variable

The value of the form variable passed from a CFSLIDER control to a ColdFusion application page is determined by the position of the slider on the scale. The form variable is passed as:

slider_name=slider_value

In the earlier example, the form variable would have been passed as:

myslider=slider_value