Programming ColdFusion MX, 2nd Edition

Sliders

The cfslider tag is a Java slider control you can embed in your applications. It offers an efficient and user-friendly way to select a value from a range of numeric values. Possible uses include volume controls, time lines, and dollar amounts. The control works by allowing users to drag the slider bar to the left to decrease the value or to the right to increase the value. The slider control is shown in Figure 10-2.

Figure 10-2. A horizontal slider control

To better illustrate how the cfslider control works, consider Example 10-8.

Example 10-8. Using the cfslider control

<cfif IsDefined('form.Slider')>
  <cfoutput>You submitted a slider value of <b>#form.Slider#</b>.</cfoutput>
  <hr noshade>
</cfif>
   
<cfform action="#CGI.Script_Name#" method="POST" name="MyForm" 
        enctype="application/x-www-form-urlencoded">
<b>1</b> <cfslider name="Slider" label="Current slider value:  %value%"
                   refreshlabel="Yes" range="1,100" value="50" scale="1"
                   align="Baseline" height="50" width="500"
                   font="Arial" fontsize="14" bold="Yes" italic="Yes"
                   textcolor="##000000" bgcolor="##FFFFFF" 
                   notsupported="<b>Your web browser must support Java to view 
                   ColdFusion Java Applets</b>"><b>100</b>
<p>    
<input type="submit" name="submit" value="Submit Form">               
</cfform>

The cfslider tag accepts several parameters that determine how to display the slider control. The name attribute specifies a name for the form field.