Whatever message this page gives is out now! Go check it out!

cfslider

Last update:
May 18, 2026

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

Forms tags

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

cfapplet, cfcalendar, cfform, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cftextarea, cftree; Introduction to Retrieving and Formatting Data and Building Dynamic Forms with cfform Tags in the Developing ColdFusion Applications

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>

Share this page

Was this page helpful?
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Thank you for your feedback. Your response will help improve this page.

On this page