We found this really cool slider tag for Coldfusion at the following location: [URL unfurl="true"]http://www.asfusion.com/blog/entry/cfslider-custom-tag/[/url]. The problem is that it's missing one core piece of functionality...no matter what we've tried we can't seem to pass a value to the slider and have it reflect that value (i.e. the slider is moved to the position of the value) when it loads.
Example: If we have a slider representing values from 0 to 50 the slider always starts at 0 on the far left. We would like to be able to query what the previous value was and have the slider load that way. So with the example above, if the previous value was 25, we'd expect the slider to load with the slider bar at the half way mark (not all the way on the left as it does presently).
Please note that we've already tried posting a similar request on the site and so far haven't gotten any response....
Here's a quick example if you want to see the code and tinker with it:
Name this file index.cfm:
Name this file slider.cfm:
Any help or suggestions would be greatly appreciated!
Example: If we have a slider representing values from 0 to 50 the slider always starts at 0 on the far left. We would like to be able to query what the previous value was and have the slider load that way. So with the example above, if the previous value was 25, we'd expect the slider to load with the slider bar at the half way mark (not all the way on the left as it does presently).
Please note that we've already tried posting a similar request on the site and so far haven't gotten any response....
Here's a quick example if you want to see the code and tinker with it:
Name this file index.cfm:
Code:
<center><cfform name="myform" height="5000" width="600" format="Flash" timeout="1000" method="post" action="##">
<cfformgroup type="panel" label="Example">
<cfformgroup type="horizontal">
<cf_slider name="mySlider1" width="150" minValue="0" maxValue="60" showValues="yes" thumStyle="cornerRadius:4; borderThickness:1;">
<cfinput width="25" value="17" name="Test_Output" type="text" bind="{mySlider1.text}" readonly="yes"/>
<cfformitem type="text" >Hours</cfformitem>
</cfformgroup>
<cfformgroup type="horizontal" style="horizontalAlign:center;">
<cfinput type="submit" name="btnSubmit" value="Submit">
</cfformgroup>
</cfformgroup>
</cfform></center>Name this file slider.cfm:
Code:
<cfparam name="attributes.name" default="slider">
<cfparam name="attributes.minValue" default="0">
<cfparam name="attributes.maxValue" default="10">
<cfparam name="attributes.showValues" default="true">
<cfparam name="attributes.width" default="">
<cfparam name="attributes.thumStyle" default="">
<cfparam name="attributes.onChange" default="">
<cfsavecontent variable="#attributes.name#_mDown">
<cfoutput>
var hr = #attributes.name#;
var thum = #attributes.name#_thum;
var leftLabel = #attributes.name#_leftLabel;
var rightLabel = #attributes.name#_rightLabel;
_root.calculatePosition = function()
{
thum._x
var maxValue = Number(rightLabel.text);
var minValue = Number(leftLabel.text);
var totalDistance = hr.width - thum.width;
var range = maxValue - minValue;
var perc = thum._x/totalDistance*100;
return Math.round( minValue + ( perc/100* range ) );
}
_root.onEnterFrame = function()
{
if(hr._xmouse >= 0 && hr._xmouse <= (hr.width - thum.width))
{
thum._x = hr._xmouse;
}
else if(hr._xmouse < 0 )
{
thum._x = 0;
}
else
{
thum._x = hr.width - (thum.width);
}
hr.text = _root.calculatePosition();
hr.dispatchEvent({type:'change'})
updateAfterEvent();
}
_root.onMouseUp = function()
{
onEnterFrame = undefined;
}
</cfoutput>
</cfsavecontent>
<cfformgroup type="horizontal" style="horizontalGap:2; indicatorGap:0;">
<cfif attributes.showValues>
<cfinput name="#attributes.name#_leftLabel" type="text" width="{#attributes.name#_leftLabel.text.length * 9 + 4}" value="#attributes.minValue#" style="borderStyle:none; textAlign:'right';" readonly="yes"/>
<cfelse>
<cfinput name="#attributes.name#_leftLabel" type="text" width="0" visible="false" value="#attributes.minValue#" readonly="yes"/>
</cfif>
<cfformgroup type="hbox" width="#attributes.width#" style="verticalGap:-12; indicatorGap:0; ">
<cfformitem type="spacer" height ="22" />
<cfinput name="#attributes.name#" type="text" height="3" onChange="#attributes.onChange#" disabled="true"/>
<cfinput type="button" value="" width="10" name ="#attributes.name#_thum" onMouseDown="#evaluate(attributes.name&'_mDown')#" style="#attributes.thumStyle#">
</cfformgroup>
<cfif attributes.showValues>
<cfinput name="#attributes.name#_rightLabel" type="text" width="{#attributes.name#_rightLabel.text.length * 9 + 4}" value="#attributes.maxValue#" style="borderStyle:none; textAlign:'left';" readonly="true" disabled="true"/>
<cfelse>
<cfinput name="#attributes.name#_rightLabel" type="text" width="0" visible="false" value="#attributes.maxValue#" readonly="true" disabled="true"/>
</cfif>
</cfformgroup>Any help or suggestions would be greatly appreciated!