CFSlider Example

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>


  1. Svetlana Kerman

    #1 by Svetlana Kerman - January 23, 2014 at 12:32 PM

    Thank you very much for posting this code! I've spent several hours looking for a solution for cfslider bug. This is the best example!
(will not be published)
Leave this field empty: