Update: jQuery UI 1.7 Slider from a Select Element
Posted by Scott on 01/15/2009
Note: This post is outdated. You can find the newest article here: Update: jQuery UI Slider from a select element - Now with ARIA Support.
We've updated our progressive enhancement select-to-slider plugin to use the new jQuery UI 1.7 and jQuery UI CSS Framework. This is an update to our jQuery UI 1.5 version and an even earlier non-UI version as well.
What's This All About?
The demo above was generated with the following code:
<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>
An additional demo generated from multiple select elements containing optgroups:
Features and Updates
- Uses jQuery UI 1.7.1: The accessible slider now uses the latest version of jQuery UI's slider, and allows passing of native slider options.
- New Options: New options have been added for choosing the label and tooltip text source, as well as better integration with native UI Slider options.
- jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.
- ARIA Changes: Due an upcoming enhancement in jQuery UI's Slider component to fully support ARIA, we've removed the ARIA additions we made in the last version of this plugin. If you need an ARIA-capable slider, please check out our previous plugin (only compatible with jQuery UI 1.5.3.).
- New Plugin Name: This plugin is now called selectToUISlider.jQuery.js. The previous version was called accessibleUISlider.jQuery.js and we've changed the name to reflect its current purpose (Native UI Slider will be ARIA-accessible). To generate a slider from a select menu with this plugin, your code should use the
- Flexible Width: This plugin now adapts to the width of its parent container, just like jQuery UI Slider does.
Download This Code
Version 2.0: FilamentGroup_selectToUISlider.zip
The following options are available in this plugin:
- labels: Number, number of labels to show. Labels are shown in even distribution from the center of the slider. Default is 3.
- tooltip: Boolean, show tooltips or not. Default is true.
- tooltipSrc: Specific String, tooltip text source from select menu. Available values are "value" or "text". Default is "text".
- labelSrc: Specific String, scale label text source from select menu. Available values are "value" or "text". Default is "value".
- sliderOptions: Object, accepts native jQuery UI slider options. Note:This plugin generates some of the native slider options. For the plugin to work as shown, do not override these options: step, min, max, range, slide, and values.
This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. We've tested it in Firefox 2/3, Safari 3, and IE6/7.
We'd love to hear what you think of this plugin and any suggestions you have for how it could be improved. Please use our form below.