User Guide Cancel

cfslider

Last updated on May 30, 2024 | Also applies to ColdFusion

ColdFusion

Open app

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

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.

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" 
align = "top|left|bottom|baseline|texttop|absbottom| 
middle|absmiddle|right" 
bgColor = "color" 
bold = "yes|no" 
font = "font name" 
fontSize = "integer" 
height = "integer" 
hSpace = "integer" 
italic = "yes|no" 
label = "text" 
lookAndFeel = "motif|windows|metal" 
message = "text" 
notSupported = "text" 
onError = "text" 
onValidate = "script name" 
range = "minimum value, maximum value" 
scale = "integer" 
textColor = "color" 
value = "integer" 
vertical = "yes|no" 
vSpace = "integer" 
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.

History

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.
align	Optional		Alignment of slider: top left bottom baseline texttop absbottom middle absmiddle right
bgColor	Optional		Background color of slider label. For a hexadecimal value, use the form: bgColor = "##xxxxxx", where x = 0-9 or A-F; use two number signs or none. any color, in hexadecimal format black red blue magenta cyan orange darkgray pink gray white lightgray yellow
bold	Optional	no	yes: label text in bold. no: medium text.
clickToChange	OptionalHTML		Whether clicking the slider changes the value of the pointer: true false
font	Optional		Font name for label text.
fontSize	Optional		Font size for label text, in points.
format	Optional	applet	Specifies if the format is: html applet
height	Optional	40, for applet 100, for HTML	Slider control height, in pixels.
hSpace	Optional		Horizontal spacing to left and right of slider, in pixels.
italic	Optional	no	yes: label text in italics. no: normal text.
increment	OptionalHTML		The unit increment value for a snapping slider.
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.
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.
max	OptionalHTML		Maximum value for the slider.
min	OptionalHTML		Minimum value for the slider.
message	OptionalApplet		Message text to appear if validation fails.
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>
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.
onValidate	Optional		Custom JavaScript function to validate user input; in this case, a change to the default slider value. Specify only the function name.
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.
textColor	Optional		Options: same as for bgcolor attribute.
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.
vSpace	Optional		Vertical spacing above and below slider, in pixels.
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>

Get help faster and easier

New user?

cfslider

FORMAT="applet" HAS BEEN DEPRECATED

Description

Category

Syntax

Syntax

See also

History

Attributes

Usage

Example

Get help faster and easier

Ask the Community

Contact Us