User Guide Cancel

cfslider

 

FORMAT="applet" HAS BEEN DEPRECATED

For a full list of deprecated features, refer to Deprecated features.

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

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">
<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">
<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"
height = "integer"
onError = "text"
onValidate = "script name"
range = "minimum value, maximum value"
scale = "integer"
value = "integer"
vertical = "yes|no"
width = "integer">
<cfslider name = "name" height = "integer" onError = "text" onValidate = "script name" range = "minimum value, maximum value" scale = "integer" value = "integer" vertical = "yes|no" width = "integer">
<cfslider 
name = "name" 
height = "integer" 
onError = "text" 
onValidate = "script name" 
range = "minimum value, maximum value" 
scale = "integer" 
value = "integer" 
vertical = "yes|no" 
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

History

ColdFusion (2025 release):

Removed the following attributes:

  • align
  • bgColor
  • bold
  • font
  • fontSize
  • hSpace
  • italic
  • label
  • lookAndFeel
  • message
  • notSupported
  • onValidate
  • scale
  • textColor
  • vSpace

ColdFusion 11:

Removed the attributes -  img , imgStyle, grooveColor, refreshLabel , tickmarkimages , tickmarklabels , tickmarkmajor , and  tickmarkminor .

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.

clickToChange

OptionalHTML

 

Whether clicking the slider changes the value of the pointer:

  • true
  • false

format

Optional

applet

Specifies if the format is:

  • html
  • applet

height

Optional

40, for applet 100, for HTML

Slider control height, in pixels.

increment

OptionalHTML

 

The unit increment value for a snapping slider.

max

OptionalHTML

 

Maximum value for the slider.

min

OptionalHTML

 

Minimum value for the slider.

onChange

OptionalHTML

 

Custom JavaScript function to run when slider value changes. Specify only the function name.

onDrag

OptionalHTML

 

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.

range

Optional

"0,100"

Numeric slider range values. Separate values with a comma.

tip

OptionalHTML

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.

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

Get help faster and easier

New user?