Slida - an iPhone-style Scriptaculous javascript slider widget

We recently found ourselves in need of an iPhone-style slider control for a web application we’re currently building. After a quick peruse of the web, it seemed nobody had already tackled this problem so we set out to solve it ourselves.

Here is a list of features we wanted it to have:

• a dual state switch with a slider that allows the user to slide between either state
• if the slider is not moved all the way to the end, then it reverts back to it’s original state
• clicking on the handle instigates a ‘slide’
• once the slida has changed state, an AJAX call is made to the server to update the status
• if javascript is not enabled a form is presented with the same functionality

Specification

The technical specification breaks down as follows:

• developed with Prototype 1.6 / Scriptaculous 1.8
• tested with Firefox 3, Safari 3, IE 6 & 7

Download

Download Slida.zip here

Overview

Here’s an example of how the code works. As you’ll see, we’ve made it nice and easy!

<script type="text/javascript">
  Element.observe(window, 'load', function(e)
  {
    var mySlida = new Effect.Slida('mySlidaForm', { 
      onLabel:	'Active', 
      offLabel: 	'Inactive'
    });
  });
</script>

<form id="mySlidaForm" action="/change-state">
  <fieldset>
    <input type="checkbox" name="state" checked="checked"/><label>active</label>
    <button type="submit">Submit</button>
  </fieldset>
</form>

The Slida effect hijacks the form that is passed to it and replaces it with the HTML for the Slida element. When the user changes the slida’s state, an AJAX call is made to the url defined by the form’s action. The parameter name is the same name as the checkbox element in the original form.

In the example above the AJAX call would be to:

/change-state?state=off

or

/change-state?state=on

This means that the same post is made to the server for an AJAX call or a form submission.

Documentation

1) Ensure you have the latest copies of Prototype and Scriptaculous – include them on your page:

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="scriptaculous.js?load=effects,slider"></script>

2) Download the Slida package and put it in your html directory. Include the javascript and css file.

<script type="text/javascript" src="slida/slida.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="slida/slida.css" />

3) Create a form on your page

<div id="wrapper" style="width: 250px">
  <form id="mySlidaForm" action="/change-state">
    <fieldset>
      <input type="checkbox" name="state" checked="checked"/><label>active</label>
      <button type="submit">Submit</button>
    </fieldset>
  </form>
</div>

The slida will fill the width of its parent container.

4) Create a new Slida effect, passing the ID of the form element and supplying the label text for the on/off states.

<script type="text/javascript">
  Element.observe(window, 'load', function(e)
  {
    var mySlida = new Effect.Slida('mySlidaForm', { 
      onLabel: 	'Active', 
      offLabel: 'Inactive'
    });
  });
</script>

API

setValue(state) – sets the state of the slida

e.g.

mySlida.setState(true)

toggleValue() – toggles the value of the slida

e.g.

mySlida.toggleValue()

Live Demo

Known Issues

• The graphics are designed to work on a white background. You can replace the graphics if you need it to work on other backgrounds.