# CFSLIDER

Used inside CFFORM, CFSLIDER allows you to place a slider control in a ColdFusion form. A slider control is like a sliding volume control. The slider groove is the area over which the slider moves.

Note | CFSLIDER incorporates a Java applet, so a browser must be Java-enabled for CFSLIDER to work properly.

### Syntax

    <CFSLIDER NAME="name"
        LABEL="text"
        REFRESHLABEL="Yes/No"
        IMG="filename"
        IMGSTYLE="style"
        RANGE="min_value, max_value"
        SCALE="uinteger"
        VALUE="integer"
        ONVALIDATE="script_name"
        MESSAGE="text"
        ONERROR="text"
        HEIGHT="integer"
        WIDTH="integer"
        VSPACE="integer"
        HSPACE="integer"
        ALIGN="alignment"
        GROOVECOLOR="color"
        BGCOLOR="color"
        TEXTCOLOR="color"
        FONT="font_name"
        FONTSIZE="integer"
        ITALIC="Yes/No"
        BOLD="Yes/No"
        NOTSUPPORTED="text">

#### NAME

Required. A name for the CFSLIDER control.

#### LABEL

Optional. A label that appears with the slider control, for example:

    LABEL="Volume %value%"

You can use %value% to reference the slider value. If % is omitted, the slider value appears immediately following the label.

#### REFRESHLABEL

Optional. Yes or No. If Yes, the label is not refreshed when the slider is moved. Default is Yes.

#### IMG

Optional. Filename of the image to be used in the slider groove.

#### IMGSTYLE

Optional. Style of the image to appear in the slider groove. Valid entries are:

- Centered
- Tiled
- Scaled

Default is Scaled.

#### RANGE

Optional. Determines the values of the left and right slider range. The slider value appears as the slider is moved.

Separate values by a comma, for example:

    RANGE="1,100"

Default is "0,100". Valid only for numeric data.

#### SCALE

Optional. An unsigned integer. SCALE defines the slider scale within the value of RANGE. For example, if RANGE=0,1000 and SCALE=100, the incremental values for the slider would be 0, 100, 200, 300, and so on.

#### VALUE

Optional. Determines the default slider setting. Must be within the values specified in RANGE. Defaults to the minimum value specified in RANGE.

#### ONVALIDATE

Optional. The name of a valid JavaScript function used to validate user input, in this case, a change to the default slider value.

#### MESSAGE

Optional. Message text to appear if validation fails.

#### ONERROR

Optional. The name of a valid JavaScript function you want to execute in the event of a failed validation.

#### HEIGHT

Optional. Height value of the slider control, in pixels.

#### WIDTH

Optional. Width value of the slider control, in pixels.

#### VSPACE

Optional. Vertical margin spacing above and below slider control, in pixels.

#### HSPACE

Optional. Horizontal margin spacing to the left and right of slider control, in pixels.

#### ALIGN

Optional. Alignment value. Valid entries are:

- Top
- Left
- Bottom
- Baseline
- TextTop
- AbsBottom
- Middle
- AbsMiddle
- Right

#### GROOVECOLOR

Optional. Color value of the slider groove. The slider groove is the area in which the slider box moves. Valid entries are:

- black
- magenta
- cyan
- orange
- darkgray
- pink
- gray
- white
- lightgray
- yellow

A hex value can be entered in the form:

    GROOVECOLOR="##xxxxxx"

Where x is 0-9 or A-F. Use either two pound signs or no pound signs.

#### BGCOLOR

Optional. Background color of slider label. See GROOVECOLOR for color options.

#### TEXTCOLOR

Optional. Slider label text color. See GROOVECOLOR for color options.

#### FONT

Optional. Font name for label text.

####

#### FONTSIZE

Optional. Font size for label text measured in points.

#### ITALIC

Optional. Enter Yes for italicized label text, No for normal text. Default is No.

#### BOLD

Optional. Enter Yes for bold label text, No for medium text. Default is No.

#### NOTSUPPORTED

Optional. The text you want to display if the page containing a Java applet-based CFFORM control is opened by a browser that does not support Java or has Java support disabled. For example:

    NOTSUPPORTED="<B> Browser must support Java to
    view ColdFusion Java Applets</B>"

By default, if no message is specified, the following message appears:

    <B>Browser must support Java to <BR>
    view ColdFusion Java Applets!</B>

### Example

    <!--- This example shows how to use CFSLIDER
    within CFFORM --->
    <HTML>

    <HEAD>
    <TITLE>
        CFSLIDER Example
    </TITLE>
    </HEAD>

    <BODY bgcolor=silver>

    <H3>CFSLIDER Example</H3>
    <P>CFSLIDER, used within a CFFORM, can provide
    additional functionality to Java-enabled browsers.

    <P>Try moving the slider back and forth to see the
    real-time value change.  Then, submit the form to show
    how CFSLIDER passes its value on to a new CF template.

    <P>

    <CFIF IsDefined("form.mySlider") is True>
    <H3>You slid to a value of <CFOUTPUT>#mySlider#</CFOUTPUT></H3>

    Try again!
    </CFIF>

    <CFFORM ACTION="cfslider.cfm" METHOD="POST" ENABLECAB="Yes">

    1 <CFSLIDER NAME="mySlider" VALUE="12" LABEL="Actual Slider Value  "
       RANGE="1,100" ALIGN="BASELINE"
       MESSAGE="Slide the bar to get a value between 1 and 100" HEIGHT="20"
     WIDTH="150" FONT="Verdana" BGCOLOR="Silver" GROOVECOLOR="Lime"
        BOLD="No" ITALIC="Yes" REFRESHLABEL="Yes"> 100

    <P><INPUT TYPE="Submit" NAME="" VALUE="Show the Result">
    </CFFORM>

    </BODY>
    </HTML>