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 -
Purpose:      Demonstrates the cfslider tag
Last Updated: 10/17/2011

    <title>CFSlider Example</title>
    <script type="text/javascript">
    function updateValue(){
        var theValue = ColdFusion.Slider.getValue('mySlider');
        document.getElementById('mytext').value = theValue;

<body onload="updateValue();">

<div align="left">CFSlider Example</div>

<cfif isDefined('form.mytext')>
    <cfdump var="#form#">

<cfparam name="form.mytext" default="50" />

    tip="true" /> 
    <cfinput type="text" name="mytext" />
    <input type="submit" value="Submit this form" />



  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: