Our Blog

cfslider custom tag

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.

Nahuel Foronda

Nahuel Foronda

19 Comments

  1. Bradford

    Bradford

    Nahuel,

    This is amazing work. Thanks for all your contributions! Clearly, your site is required viewing for any cf flash form enthusiast!

  3. kt

    works great...any simple way to set a the default value of the slider
  4. Laura

    Laura

    kt,
    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.
  5. Adam

    Adam

    Just a question...Is there a reason that you didn't include a call to the mDown function in the onMouseDown event of the horizontal rule as well? The ability to click on the hr and have the slider move to that position makes this control act even more like the sliders that I'm used to. Nice job.
  6. Nahuel

    Nahuel

    Hi Adam,
    Good point, I never thought about it. Maybe I'll implement it in the next version.
  7. Fred Weber

    Fred Weber

    It is possible to move the thumb from actionscript code. Here is the cfform code for my example:

    &lt;cfinput name=&quot;tolerance2&quot; type=&quot;text&quot; bind=&quot;{mySlider2.text}&quot; width=&quot;100&quot; label=&quot;Cheating Tolerance: &quot;&gt;
    &lt;cf_slider name=&quot;mySlider2&quot; width=&quot;100&quot; minValue=&quot;0&quot; maxValue=&quot;100&quot;
          thumStyle=&quot;cornerRadius:4; borderThickness:1;&quot;&gt;

    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.
  8. Erik

    Erik

    This is a fantastic tag. One thought though, to use via cfmodule, the name attributes in the source code need to be changed because &quot;name&quot; is reserved for cfmodule. If I am wrong or there is a workaround without changing the source let me know.
  9. Laura

    Laura

    Erik,
    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:

    &lt;cfset attributes = structnew()/&gt;
    &lt;cfset attributes.width = &quot;100&quot;/&gt;
    &lt;cfset attributes.minValue = &quot;0&quot;/&gt;
    &lt;cfset attributes.maxValue = &quot;100&quot;/&gt;
    &lt;cfset attributes.name = &quot;mySlider&quot;/&gt;
    &lt;cfset attributes.thumStyle = &quot;cornerRadius:4; borderThickness:1;&quot;/&gt;
       
    &lt;cfmodule template=&quot;slider.cfm&quot; attributeCollection=&quot;#attributes#&quot;&gt;

    In the same structure, you can pass the other custom tag's attributes (showValues and onChange). You can also use

    &lt;cfmodule name=&quot;slider&quot; attributeCollection=&quot;#attributes#&quot;&gt;

    if you want to use the name attribute of cfmodule.

  10. Joe

    That's great work! Unfortunately we still use CF5.0 ( will be upgrading to MX in next couple of months). Iam trying to use cfslider tag in CF 5.0 and it just doesn't work right. I tried the example code from livedocs and it just doesn't return anything upon form submission.
  11. Fred

    Fred

    Thanks for all the work on this. It's a great aid, but I've encounter a limitation with it that I can't seem to work around. I want to use it as a way for users to enter a rating for each training session that they've attended. I have it in a loop so that I can have one for each speaker. It works great for up to 15 speakers, but no more. I've tried putting it in two different loops, etc, but as soon as more then 15 are required on screen it quites working (nothing on screen).
  12. Laura

    Laura

    Fred,
    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.
  13. Joe

    Joe

    Great Slider... I need the slider range from 0.1 to 9.9. How can I do it by using this?

    Thanks
  14. Laura

    Laura

    Joe,
    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 :)
  15. Fred

    Fred

    How can I move the thumb to a preset position via an 'onLoad'? Using the code posted by Fred Weber on 5/27/05, I can use actionscript move it using an onChange handler, but can't get it to move any other way.
  16. Troy

    Troy

    I know onLoad doesn't exist in the flash form world but what works around can you do to default the values. reason I'm asking making a Project tracker and want the employees to be able to easily see what they set instead of starting at 0 every time. I'm passing the current value into the module so I can displace it on the button.
  17. Troy

    Troy

    was wondering the input field that is bond to the slider is there away to set the value as a default on there?
  18. ID10T newbee

    ID10T newbee

    i am new to CF i am a old "c" programmer and am trying to use your slider.cfm if i include it it displays but i cant change the values.... what am i doing wrong

    please help this old fraud... um ... programmer.

    thank you
  19. Alain

    Alain

    Thanks+++ Great stuff.

    Just 1 question: I would like the maxValue property to be bound to a value in a cfgrid. I have tried

    maxValue="{mycfgrid.selectedItem.maxpoints}"

    ...but it doesn't like it. Any help really appreciated,

    Alain