Flash sliders in HTML Forms

Posted on May 31, 2005

Ranges are notoriously missing from the palette of HTML form elements. Here's a quick'n'dirty effort at integrating Flash sliders into an HTML form.

The first example shows a list in which particular elements are highlighted based on a user-given criterium (price range).

The second is a classic job for sliders; a survey where the user is asked to rate within a defined range (here 0-10).

5 variables are passed from the HTML object tag to the flash swf:

  • min - the minimum value
  • max - the maximum value
  • initval - the initial value
  • divs - the number of divisions
  • fld - the id of the associated field in the html document

The onChange function defined in the flash movie calls the javascript function setSliderFld, which in turn sets the value in the field define by the fld variable passed to the swf.

When the 'foobar' field is changed, the setPriceRange is called to swap the css styles of the product divs. This could almost certainly be done more elegantly, but then it wouldn't be quick'n'dirty!

The flash slider component is from illogicz.com (via Flash Components)

Download the files here.



Comments (2)

Anna Karrye said

I'm a little late with a reply to this.
I like it very much.
Use of check boxes and radio buttons, basicaly highlighting and filtering via a form would be an excelent concept.

Posted by: Anna Karrye at March 15, 2006 06:45 AM .

boudj said

hi,

thank for this good code!

Posted by: boudj at May 3, 2006 02:35 PM .