cfslider

Description

Places a slider control, for selecting a numeric value from a range, in a ColdFusion form. The slider moves over the slider groove. As the user moves the slider, the current value displays. Used within a cfform tag for forms in HTML and applet format. Not supported with Flash forms.

In HTML forms, you can create visually rich sliders that let you modify adjustable values in fixed increments. You can specify maximum, minimum, and increment values, to help you quickly filter complex results.

The sliders are categorized based on the slider control. The available slider controls are:

Vertical
The slider has vertical controls that can be adjusted to the top or bottom.

Horizontal
The slider has horizontal controls that can be adjusted to the left or right.

Tip
The slider displays the values as data tips.

Snapping
The slider moves in incremental values.

Category

Forms tags

Syntax

For HTML 

<cfslider  
    name = "name" 
    clickToChange = "true|false" 
    format = "html" 
    height = "integer" 
    increment = "Unit increment value" 
    max = "maximum value for the slider" 
    min = "minimum value for the slider" 
    onChange = "JavaScript function name" 
    onDrag = "JavaScript function name" 
    tip = "true|false" 
    value = "integer" 
    vertical = "true|false" 
    width = "integer">

Syntax

For Applet

<cfslider 
    name = "name" 
    align = "top|left|bottom|baseline|texttop|absbottom| 
    middle|absmiddle|right" 
    bgColor = "color" 
    bold = "yes|no" 
    font = "font name" 
    fontSize = "integer" 
    height = "integer" 
    hSpace = "integer" 
    italic = "yes|no" 
    label = "text" 
    lookAndFeel = "motif|windows|metal" 
    message = "text" 
    notSupported = "text" 
    onError = "text" 
    onValidate = "script name" 
    range = "minimum value, maximum value" 
    scale = "integer" 
    textColor = "color" 
    value = "integer" 
    vertical = "yes|no" 
    vSpace = "integer" 
    width = "integer">
Note: You can specify this tag’s attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute names as structure keys.

See also

cfapplet, cfcalendar, cfform, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cftextarea, cftree; Introduction to Retrieving and Formatting Data and Building Dynamic Forms with cfform Tags in the Developing ColdFusion Applications

History

ColdFusion MX: Deprecated the img, imgStyle, grooveColor, refreshLabel, tickmarklabels, tickmarkmajor, tickmarkminor, and tickmarkimages attributes. They sometimes do not work, and can cause an error, in later releases.

Attributes

Attribute

Req/Opt

Default

Description

name

Required

 

Name of cfslider control.

align

Optional

 

Alignment of slider:

  • top

  • left

  • bottom

  • baseline

  • texttop

  • absbottom

  • middle

  • absmiddle

  • right

bgColor

Optional

 

Background color of slider label.

For a hexadecimal value, use the form: bgColor="##xxxxxx", where x = 0-9 or A-F; use two number signs or none.

  • any color, in hexadecimal format

  • black

  • red

  • blue

  • magenta

  • cyan

  • orange

  • darkgray

  • pink

  • gray

  • white

  • lightgray

  • yellow

bold

Optional

no

  • yes: label text in bold.

  • no: medium text.

clickToChange

Optional

HTML

  
Whether clicking the slider changes the value of the pointer:

  • true

  • false

font

Optional

 

Font name for label text.

fontSize

Optional

 

Font size for label text, in points.

format

Optional

applet

Specifies if the format is:

  • html

  • applet

height

Optional

40, for applet

100, for HTML

Slider control height, in pixels.

hSpace

Optional

 

Horizontal spacing to left and right of slider, in pixels.

italic

Optional

no

  • yes: label text in italics.

  • no: normal text.

increment

Optional

HTML

  

The unit increment value for a snapping slider.

label

Optional

 

Label to display with control; for example, "Volume" This displays:"Volume %value%"

To reference the value, use "%value%". If %% is omitted, slider value displays directly after label.

lookAndFeel

Optional

Windows

  • motif: renders slider using Motif style.

  • windows: renders slider using Windows style.

  • metal: renders slider using Java Swing style.

If platform does not support choice, the tag defaults to the platform’s default style.

max

Optional

HTML

  

Maximum value for the slider.

min

Optional

HTML

  

Minimum value for the slider.

message

Optional

Applet

 

Message text to appear if validation fails.

notSupported

Optional

 

Text to display if a page that contains a Java applet-based cfform control is opened by a browser that does not support Java or has Java support disabled. For example:

"<b> Browser must support Java to view ColdFusion Java Applets</b>"

Default message:

<b>Browser must support Java to <br>view ColdFusion Java Applets!</b>

onChange

Optional

HTML

 

Custom JavaScript function to run when slider value changes.

Specify only the function name.

onDrag

Optional

HTML

 

Custom JavaScript function to run when you drag the slider.

Specify only the function name.

onError

Optional

 

Custom JavaScript function to run if validation fails.

Specify only the function name.

onValidate

Optional

 

Custom JavaScript function to validate user input; in this case, a change to the default slider value.

Specify only the function name.

range

Optional

"0,100"

Numeric slider range values.

Separate values with a comma.

scale

Optional

 

Unsigned integer. Defines slider scale, within range. For example, if range="0,1000" and scale="100", the display values are:

0, 100, 200, 300, ...

Signed and unsigned integers in ColdFusion are in the range -2,147,483,648 to 2,147,483,647.

textColor

Optional

 

Options: same as for bgcolor attribute.

tip

Optional

HTML

true

Whether the data valu has to display as data tips:

  • true

  • false

value

Optional

Minimum in range

Starting slider setting. Must be within the range values.

vertical

Optional

no(for applet forms)false(for HTML forms)

For Applet forms:

  • yes: renders slider in browser vertically. Set width and height attributes; ColdFusion does not automatically swap width and height values.

  • no: renders slider horizontally.

For HTML forms:

  • true: renders slider in browser vertically. Set width and height attributes; ColdFusion does not automatically swap width and height values.

  • false: renders slider horizontally.

vSpace

Optional

 

Vertical spacing above and below slider, in pixels.

width

Optional

200, for HTML

Slider control width, in pixels.

Usage

This tag requires the client to download a Java applet. Using this tag is sometimes slightly slower than using an HTML form element to display the same information. Also, if the client does not have an up-to-date Java plug-in installed, the system sometimes has to download an updated Java plug-in to display the tag.

For this tag to work properly, the browser must be JavaScript-enabled.

If the following conditions are true, a user’s selection from query data that populates this tag’s options continues to display after the user submits the form:

  • The cfformpreserveData attribute is set to "Yes".

  • The cfformaction attribute posts to the same page as the form itself (this is the default), or the action page has a form that contains controls with the same names as corresponding controls on the user entry form.

For more information, see the cfform tag entry.

Example

<!--- This example shows how to use cfslider</h3> 
    <br/ > 
    <cfform name="form01"> 
    <cfslider name="slider1" 
    format="HTML" 
    vertical="false" 
    width="350" 
    value="100" 
    min="0" 
    max="200" 
    increment="10" 
    tip="true"/> 
</cfform>