A while back, a fellow Seattle CFUG member asked me to help him out with the cfslider tag. Honestly, It wasn't a tag I'd used much (I'm using jQuery for most UI stuff), although it is pretty easy to use, and can provide a pretty slick interface, depending on the application.
What follows is a little bit of JavaScript and CFML which creates a slider, updates the value in a text input, and allows you to submit the form. The form results are dumped when the form is submitted. This is a very basic example of the cfslider tag, and I'll post a more detailed version later which I actually used in a production environment.
Here's the demo
This is the code:
<!---
Filename: slider.cfm
Created by: Kris Korsmo
Organization: Leading Edge Digital Media - www.leadingedge.net
Purpose: Demonstrates the cfslider tag
Last Updated: 10/17/2011
--->
<html>
<head>
<title>CFSlider Example</title>
<script type="text/javascript">
function updateValue(){
var theValue = ColdFusion.Slider.getValue('mySlider');
document.getElementById('mytext').value = theValue;
}
</script>
</head>
<body onload="updateValue();">
<div align="left">CFSlider Example</div>
<cfif isDefined('form.mytext')>
<cfdump var="#form#">
</cfif>
<cfparam name="form.mytext" default="50" />
<cfoutput>
<cfform>
<cfslider
name="mySlider"
format="HTML"
width="300"
value="#form.mytext#"
min="0"
max="100"
onchange="updateValue"
increment="5"
tip="true" />
<cfinput type="text" name="mytext" />
<input type="submit" value="Submit this form" />
</cfform>
</cfoutput>
</body>
</html>
Take A Bow
Blow
Heartbreaker
Recent Comments