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

The plugin enhances the jQuery UI slider in many ways, adding text labels and ticks on the slider axis, and tooltips that appear while a slider is being used.

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!