Create A Slider From A Select Box

This is a beautiful jQuery plugin that automatically converts select boxes into accessible sliders.

jQuery UI’s slider component is used. Besides a standard slider, multiple select boxes can be used to generate 1 slider too for mentioning a data range.

Usage is terribly easy:

For such a select box:

<label for="speed">Select a Speed:</label>
<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Med" selected="selected">Med</option>

Call the function & that’s all:

$('select#speed').accessibleUISlider();

The initial position of the slider can be mentined via the selected="selected" attribute to the option element you prefer.