Generating Dynamic jQuery Slider with dynamic min and max values

Question

I have a project that requires the end user to select a Photographer and associated Roll Numbers which are different for each photographer (data is brought in by a JSON database call on page load and dropped into a Javascript Array -- for quick display of values). I have created a jsFiddle with everything that I need but the dynamically created slider does not move after it is created. I am sure it has something to do with the min and max values but it "seems" to be correct. The autocomplete section just displays the Photographer selection and then it dynamically creates the slider below it from an existing HTML element. I have removed a lot of extraneous code I'm using to just the basics to solve the problem.

[jsFiddle Link] http://jsfiddle.net/sN63W/2/

(Ommiting data array named 'Photographer' - But it is in the jsFiddle Link)

$(function () {
   $("#photographer-label").autocomplete({
      minLength: 0,
      source: Photographer,
      focus: function (event, ui) {
          $('#photographer-label').val(ui.item.label);
          return false;
      },
      select: function (event, ui) {
          $('#photographer').val(ui.item.value);
          $('#photographer-label').val(ui.item.label);
          var slider_min = ui.item.rollnum_from;
          var slider_max = ui.item.rollnum_to;
          alert('Selected Rolls: ' + slider_min + ' : ' + slider_max); // For Debugging
          $('#rollnum-slider').slider({
              min: slider_min, // ui.item.rollnum_from,
              max: slider_max, // ui.item.rollnum_to,
              change: function (event, ui) {
                  $('#rollnum').val(ui.value);
              }
          });
      }
   });
});

Ironically, if I insert a hard coded number inside the min and max values for the slider it works correctly. But the values (according to the alert box) seem to be correct. What am I missing? I know it is probably a simple answer but I am just having a big brain cramp about it.

PS As a side issue, I also want the autocomplete to display the "label" and not the "data" when you remove focus to the slider, but it doesn't seem to be doing that. But that isn't such a big deal.

Answer 1

It's because your JSON data is a string, get rid of your quotation marks for those values eg

{
      "photographer_id": "2",
          "label": "Tommy Stay (TS)",
          "value": "TS",
          "rollnum_from": 1,
          "rollnum_to": 10
}

Instead of

{
      "photographer_id": "2",
          "label": "Tommy Stay (TS)",
          "value": "TS",
          "rollnum_from": "1",
          "rollnum_to": "10"
}

Here is the Jsfiddle,

http://jsfiddle.net/ufv9T/1/

note: I changed the "change" to "slide" and added "value" and $( "#rollnum" ).val( $( "#rollnum-slider" ).slider( "value" ) ); so that a number shows on initial load of the slider, this is not necessary for your example to work.