jQuery UI selectToUISlider Plugin uses progressive enhancement to replace an already-functional HTML select element with a JQuery UI Slider control. Having both ARIA and tabindex support, it adds a number of features for both visual users and those on assistive technologies. The user is able to make a choice even with JavaScript disabled, since the select element can be used if the slider is unavailable.

Basic Usage

HTML

<select name="speed" id="speed"> <option value="Slower">Slower</option> <option value="Slow">Slow</option> <option value="Med" selected="selected">Med</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select>

JavaScript

$('select').selectToUISlider();

Features include:

Unobtrusive

Very easy to setup

Accessible to users on assistive devices

Degrades gracefully if JavaScript is disabled