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. Not supported with Flash forms.
<cfslider
name = "name"
label = "text"
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"
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, cfcalendar, cfform, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cftextarea, cftree; Introduction to Retrieving and Formatting Data and Building Dynamic Forms with cfform Tagsin ColdFusion MX Developer's Guide
ColdFusion MX: Deprecated the img
, imgStyle
, grooveColor
, refreshLabel
, tickmarklabels
, tickmarkmajor
, tickmarkminor
, and tickmarkimages
attributes. They might not work, and might cause an error, in later releases.
Attribute | Req/Opt | Default | Description |
---|---|---|---|
name |
Required |
|
Name of |
label |
Optional |
|
Label to display with control; for example, To reference the value, use |
range |
Optional |
"0,100" |
Numeric slider range values. Separate values with a comma. |
scale |
Optional |
|
Unsigned integer. Defines slider scale, within 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 |
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:
|
lookAndFeel |
Optional |
Windows |
If platform does not support choice, the tag defaults to the platform's default style. |
vertical |
Optional |
No |
|
bgColor |
Optional |
|
Background color of slider label. For a hexadecimal value, use the form:
|
textColor |
Optional |
|
Options: same as for |
font |
Optional |
|
Font name for label text. |
fontSize |
Optional |
|
Font size for label text, in points. |
italic |
Optional |
No |
|
bold |
Optional |
No |
|
notSupported |
Optional |
|
Text to display if a page that contains a Java applet-based
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. Also, if the client does not have an up-to-date Java plugin installed, the system might also have to download an updated Java plugin 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:
cfform
preserveData
attribute is set to "Yes
".
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.
<!--- 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>