Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | 5 Comments

jQuery UI Slider makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

It is possible to control a select element, showing the options as the slider is moved. But what happens if the options are not as simple or predictable as 1, 2, 3,..?

For example, if a select element is describing cars then only showing the currently selected option is not very user friendly. What you need to do is show each option below where the slider will stop.

demo

The Slider

This jQuery will create a slider after our select element, then when the user moves the slider, the value of the current option will be placed into the anchor tag that is acting as the slider control.

$(function(){
    //select element 2+ options
    var el = $('.select');

    //add slider
    var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
        min: 1,
        max: el.options.length,
        range: 'min',
        value: el.selectedIndex + 1,
        slide: function( event, ui ) {
          el.selectedIndex = ui.value - 1;
          slider.find("a").text(el.options[el.selectedIndex].label);
        }
    });
    
    //pre-populate value into slider handle.
    slider.find("a").text(el.options[el.selectedIndex].label);
)};

Solution

To create a legend, we need to know the width of the slider and the number of elements then divide one against the other:

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

The p tag needs to have the style ‘display:inline-block’ to render correctly, otherwise each label will take one line or the labels will be stacked up right next to each other.

Using some clever CSS we can then style our slider handle, or we can cheat and just use a background image ;)

Posted By:

Comments

  • Rob

    Is there a working demo somewhere?

    • http://richard.parnaby-king.co.uk/ Richard

      I have put in a link to a live demo.

  • me

    your slider doesn’t work like it should..

    chrome/ie

    is something wrong with it..

  • Matthias

    Hi,

    thanks for the snippet, but I also archive problems with Chrome.
    Seems like that slider don’t like it if “min” and “step” has the same values. If you would add step: 0.5 to your example it would also work in chrome but would have another behaviour.

    are there any ideas how to workaround this for chrome?

    thanks

    EDIT:
    I have now implementet the current jqueryUI Version (1.10.3) and the Bug has gone.

    Cheers.

    Visit me on
    http://www.trust-design.net

  • http://dotnetdeveloper84.blogspot.com Noor Rahman

    If some one need slider with more labels and other functionality then just here is my article .

    http://dotnetdeveloper84.blogspot.com

  • ABOUT

    Having three years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • RSS SUBSCRIBE TO OUR FEED

  •