Search code examples
jqueryjquery-uijquery-ui-slider

jQuery-UI Slider - Cannot select slider handle during 'create' event

I'm inserting the slider value as text inside the slider handle itself, which works fine while sliding. But I also need to display that value on pageload as well, which means I need to inject the value when the slider is first initialized and I can't nail down just how to do that.

Normally you could get the handle using ui.handle, but according to the documentation for the 'create' event "The ui object is empty but included for consistency with other events".

Here's the init function. The markup for the page is mostly irrelevant to the question, as the only markup involved is the handle (the 'a' tag) inside the slider that is created by jQuery-ui itself.

function initMapWidget(){
  var map = $('#popup-about-ourstory').children('.map')
  , slider = $(map).find('#map-slider')
  , yearStart = 1983
  , yearEnd = 2013
  ;

  $(slider).slider({
    min: yearStart,
    max: yearEnd,
    create: function( event, ui ){
      $(slider).children('a').innerHTML = yearStart;
    },
    slide: function( event, ui ){
      ui.handle.innerHTML = ui.value;
    }
  });
});

I would REALLY like to stay away from a setTimeout solution if possible.

Solution

  • Maybe I'm missing something, but why not set the text with text()?

    slider.children('a').text(yearStart);

    This innerHTML property doesn't work on a jQuery wrapped element.

    http://jsfiddle.net/blackjim/5eCU9/