cfslider

Description

Puts 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.

Syntax

<cfslider 
name = "name"
  label = "text"
  refreshLabel = "Yes" or "No"
  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"
  tickMarkMajor = "Yes" or "No"
  tickMarkMinor = "Yes" or "No"
  tickMarkImages = "URL1, URL2, URLn"
  tickMarkLabels = "Yes" or "No" or "list"
  lookAndFeel = "motif" or "windows" or "metal"
  vertical = "Yes" or "No"
  bgColor = "color"
  textColor = "color"
  font = "font_name"
  fontSize = "integer"
  italic = "Yes" or "No"
  bold = "Yes" or "No"
  notSupported = "text">

History

New in ColdFusion MX: The img, imgStyle, and grooveColor attributes are deprecated. Do not use them in new applications. They might not work, and might cause an error, in later releases.

Attributes

Attribute Req/
Opt
Default
Description

name
Required

Name of cfslider control.

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.

refreshLabel
Optional
Yes

Yes: when user moves slider, label is refreshed

No

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.

value
Optional
Minimum in range
Starting slider setting. Must be within the range values.

onValidate
Optional

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

message
Optional

Message text to appear if validation fails.

onError
Optional

Custom JavaScript function to execute if validation fails.
Specify only the function name.

height
Optional
40
Slider control height, in pixels.

width
Optional

Slider control width, in pixels.

vSpace
Optional

Vertical spacing above and below slider, in pixels.

hSpace
Optional

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

align
Optional

Alignment of slider

top

left

bottom

baseline

texttop

absbottom

middle

absmiddle

right

tickMarkMajor
Optional
No

Yes: render major tickmarks in slider scale.

No: no major tickmarks.

Major tick marks display at intervals specified by scale.

tickMarkMinor
Optional
No

Yes: render minor tickmarks in slider scale.

No: no minor tickmarks

Minor tickmarks display between major tickmarks.

tickMarkImages
Optional

Comma-delimited list of URLs specifying images in slider tickmark scale.
If you do not specify enough values, the last value is repeated for remaining tickmarks. If you specify too many values, extra values are ignored.

tickMarkLabels
Optional
No

yes: numeric tickmarks based on the value of the range and scale attributes.

no: prevents label text from displaying

Comma-delimited list of strings for tickmark labels; for example, "ten, twenty, thirty, forty"

If you do not specify enough values, the last value is repeated for remaining tickmarks. If you specify too many values, extra values are ignored.

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.

vertical
Optional
No

Yes: renders slider in browser vertically. You must set width and height attributes; ColdFusion does not automatically swap width and height values.

No: renders slider horizontally.

bgColor
Optional

Background color of slider label.
For a hex value, use the form: bgColor = "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.

Any color, in hex format

black

red

blue

magenta

cyan

orange

darkgray

pink

gray

white

lightgray

yellow

textColor
Optional

Options: same as for bgcolor attribute

font
Optional

Font name for label text.

fontSize
Optional

Font size for label text, in points.

italic
Optional
No

Yes: italics label text

No: normal text

bold
Optional
No

Yes: bold label text

No: medium text

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:
" Browser must support Java to view ColdFusion Java Applets"
Default message:
Browser must support Java to view ColdFusion Java Applets!

Attribute	Req/ Opt	Default	Description
name	Required		Name of cfslider control.
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.
refreshLabel	Optional	Yes	Yes: when user moves slider, label is refreshed No
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.
value	Optional	Minimum in range	Starting slider setting. Must be within the `range` values.
onValidate	Optional		Custom JavaScript function to validate user input; in this case, a change to the default slider value. Specify only the function name.
message	Optional		Message text to appear if validation fails.
onError	Optional		Custom JavaScript function to execute if validation fails. Specify only the function name.
height	Optional	40	Slider control height, in pixels.
width	Optional		Slider control width, in pixels.
vSpace	Optional		Vertical spacing above and below slider, in pixels.
hSpace	Optional		Horizontal spacing to left and right of slider, in pixels.
align	Optional		Alignment of slider top left bottom baseline texttop absbottom middle absmiddle right
tickMarkMajor	Optional	No	Yes: render major tickmarks in slider scale. No: no major tickmarks. Major tick marks display at intervals specified by `scale`.
tickMarkMinor	Optional	No	Yes: render minor tickmarks in slider scale. No: no minor tickmarks Minor tickmarks display between major tickmarks.
tickMarkImages	Optional		Comma-delimited list of URLs specifying images in slider tickmark scale. If you do not specify enough values, the last value is repeated for remaining tickmarks. If you specify too many values, extra values are ignored.
tickMarkLabels	Optional	No	yes: numeric tickmarks based on the value of the `range` and `scale` attributes. no: prevents label text from displaying Comma-delimited list of strings for tickmark labels; for example, `"ten, twenty, thirty, forty"` If you do not specify enough values, the last value is repeated for remaining tickmarks. If you specify too many values, extra values are ignored.
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.
vertical	Optional	No	Yes: renders slider in browser vertically. You must set `width` and `height` attributes; ColdFusion does not automatically swap width and height values. No: renders slider horizontally.
bgColor	Optional		Background color of slider label. For a hex value, use the form: `bgColor = "##xxxxxx"`, where x = 0-9 or A-F; use two pound signs or none. Any color, in hex format black red blue magenta cyan orange darkgray pink gray white lightgray yellow
textColor	Optional		Options: same as for `bgcolor` attribute
font	Optional		Font name for label text.
fontSize	Optional		Font size for label text, in points.
italic	Optional	No	Yes: italics label text No: normal text
bold	Optional	No	Yes: bold label text No: medium text
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>

Usage

This tag requires the client to download a Java applet. Using this tag may be slightly slower than using an HTML form element to display the same information.

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 cfform preserveData attribute is set to "Yes"
The cfform action 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 within cfform --->
<h3>cfslider Example</h3>
<p>cfslider, used within a cfform, can provide 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 page.
<cfif isdefined("form.mySlider") is true>
  <h3>You slid to a value of   <cfoutput>#mySlider#</cfoutput></h3>
  Try again!
</cfif>
<cfform action = "cfslider.cfm">
  <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 = "50"     width = "150" font = "Verdana" 
    bgColor = "Silver" bold = "No" 
    italic = "Yes" refreshLabel = "Yes"> 100
<p><input type = "Submit" name = "" value = "Show the Result">
</cfform>