Reader

Generate a jQuery UI Slider using Data from a Select Element

Last updated on by Gabriel Livan

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.

jquery-ui-slider

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.