cfslider custom tag
21 comments Posted by: Nahuel
One of the missing controls in the cfform is the slider. It's something that we don't use every day but sometimes we need it.
So I made a cf custom tag that creates a slider for that purpose.
You can pass the following attributes to the slider:
width
minValue
maxValue
thumStyle ( style sheet for the Draggable button )
onChange ( event that gets triggered when the slider changes )
showValues ( to hide or show the labels of min and max values )
name ( a unique name )
We can also bind the value of the slider to another control.
This is a code example of how to use it:
<cfform name="myform" height="200" width="220" format="Flash" timeout="1000">
<cf_slider name="mySlider" width="100" minValue="0" maxValue="100"
thumStyle="cornerRadius:4; borderThickness:1;">
<cfinput name="output" type="text" bind="{mySlider.text}"/>
</cfform>
You can view a live example
Download the source.
21 Comments so far
Write yoursThis is amazing work. Thanks for all your contributions! Clearly, your site is required viewing for any cf flash form enthusiast!
You would need so use onload to do that. Since there is no onload in flash forms, it would not be possible without unsing one of the available workarounds.
Good point, I never thought about it. Maybe I'll implement it in the next version.
<cfinput name="tolerance2" type="text" bind="{mySlider2.text}" width="100" label="Cheating Tolerance: ">
<cf_slider name="mySlider2" width="100" minValue="0" maxValue="100"
thumStyle="cornerRadius:4; borderThickness:1;">
And here is the actionscript to move it:
mySlider2_thum._x = (mySlider2.width - mySlider2_thum.width)/100*tolerance2.text;
Note that the control is named mySlider2 and the setting is named tolerance2. Just put this code in either an initalization section or an onchange handler and the control moves on its own.
You don't need to change the code. If you want to call the tag with cfmodule, use attributeCollection to pass the attributes, including name.
This code will do the same as the example in the post:
<cfset attributes = structnew()/>
<cfset attributes.width = "100"/>
<cfset attributes.minValue = "0"/>
<cfset attributes.maxValue = "100"/>
<cfset attributes.name = "mySlider"/>
<cfset attributes.thumStyle = "cornerRadius:4; borderThickness:1;"/>
<cfmodule template="slider.cfm" attributeCollection="#attributes#">
In the same structure, you can pass the other custom tag's attributes (showValues and onChange). You can also use
<cfmodule name="slider" attributeCollection="#attributes#">
if you want to use the name attribute of cfmodule.
Even if it worked, as a rule of thumb, never put loops in your cfform. They make them really slow as the form has to recompile each time. Instead, use a repeater, and put the controls you would put in the loop inside the repeater.
Thanks
If you want decimals, you will have modify line 23 getting rid of the rounding Math.round(), then set your range from 0.1 to 9.9. You will probably get too many decimal places, but you will need to do some math if you want to get rid of them :)
please help this old fraud... um ... programmer.
thank you