cfslider ColdFusion 9 Documentation

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.

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.

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>

cfslider

Description

Category

Syntax

Syntax

See also

History

Attributes

Usage

Example