Building slider bar controls

You can use the cfslider control in a cfform tag to create a slider control and define a wide range of formatting options for slider label text, label font name, size, boldface, italics, and color, as well as slider scale increments, range, positioning, tick marks, and behavior. Slider bars are useful because they are highly visual and users cannot enter invalid values.

To create a slider control:

  1. Create a ColdFusion page with the following content:
    <cfform name="Form1" action="submit.cfm">
    
      <cfslider name="myslider"
        bgcolor="cyan"
        bold="Yes"
        range="0,1000"
        scale="100"
        value="600"
        fontsize="14"
        label="Slider %value%"
        height="60"
        tickmarkmajor="True"
        width="400">
    
    </cfform>
    
  2. Save the file as slider.cfm and view it in your browser. The following figure shows the output of this code:

    Example slider control

To get the value of the slider in the action page, use the variable Form.slider_name; in this case, Form.myslider.

Comments