How to use cfslider in ColdFusion

cfslider

cfslider.cfm


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cfslider tag: how to use cfslider in coldfusion</title>
</head>

<body>
<h2 style="color:DeepPink; font-style:italic">cfslider tag example: how to use</h2>
<hr width="400" align="left" color="OrangeRed" />
<br />

<cfparam name="Form.AngleSlider" default="0">

<table border="1" cellpadding="5" cellspacing="0" bordercolor="Orange">
    <tr valign="top" style="color:RosyBrown; font-weight:bold">
     <td colspan="2">
            <cfform name="SliderTestForm" method="post">
                Angle
                <cfslider 
                    name="AngleSlider" 
                    value="180" 
                    range="0,360"
                    label="Value: " 
                    refreshlabel="yes"
                    width="360"
                    height="50"
                    >360
                <cfinput 
                    type="submit" 
                    name="SubmitButton" 
                    value="RotateImage"
                    style="height:45px; width:150px; font-size:large; font-style:italic; font-weight:bold; color:SeaGreen;"
                    />        
            </cfform>
        </td>
    </tr>
    <tr bgcolor="OrangeRed" style="color:Snow; font-size:large" align="center">
     <td>
         Original Image
        </td>
        <td>
         Image Rotate <cfoutput>#Form.AngleSlider#</cfoutput>
        </td>
    </tr>
    <tr valign="top" style="color:RosyBrown; font-weight:bold">
     <td>
         <img src="Images/Butterfly8.jpg"/>
        </td>
        <td>
            <cfimage action="rotate" angle="#Form.AngleSlider#" source="Images/Butterfly8.jpg" name="ModifiedImage">
            <cfimage action="writetobrowser" source="#ModifiedImage#">
        </td>
    </tr>
</table>

</body>
</html>













More ColdFusion examples