Etykiety suwaka jQuery UI pod suwakiem

Ograniczam się do używania jQuery 1.4.2 i jQuery ui 1.8.5 (nie jest to z wyboru, proszę nie pytać mnie o aktualizację do najnowszych wersji). Utworzyłem suwak, który pokazuje bieżącą wartość powyżej suwaka, ale potrzebuję teraz sposobu na wypełnienie legendy poniżej suwaka oddalonej od suwaka (tj. Jeśli suwak ma szerokość 100 pikseli i jest pięć wartości suwak będzie przyciągał co 20 pikseli. W tym przykładzie chciałbym, aby wartości w legendzie były umieszczane w odstępach co 20 pikseli).

Oto przykład tego, czego chcę:

Oto jQuery, które mam (zasymilowane ze strony demonstracyjnej suwaka ui):

<code>//select element with 5 - 20 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);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
</code>

questionAnswers(4)

yourAnswerToTheQuestion