Estoy limitado a usar jQuery 1.4.2 y jQuery ui 1.8.5 (esto no es por elección, por favor no me pida que actualice a las últimas versiones). He creado un control deslizante que muestra el valor actual por encima de la barra deslizante, pero lo que necesito ahora es una forma de rellenar una leyenda debajo de la barra deslizante distanciada de la misma manera que el control deslizante (es decir, si el control deslizante tiene un ancho de 100 px y hay cinco valores) el control deslizante se ajustará cada 20 px. En este ejemplo, me gustaría que los valores de la leyenda se coloquen en intervalos de 20 px.

Aquí hay un ejemplo de lo que quiero:

Aquí está el jQuery que tengo (asimilado de la página de demostración del control deslizante de la interfaz de usuario):

<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>