cfslider

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.

Forms tags

<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">

cfapplet, cfinput, cfform, cfselect, cftextinput, cftree, cftreeitem

ColdFusion MX: Deprecated the img, imgStyle, and grooveColor attributes. They might not work, and might cause an error, in later releases.

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>

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:

For more information, see the cfform tag entry.

<!--- 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>

View comments on LiveDocs