Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.

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!