javascript - Generating Dynamic jQuery Slider with dynamic min and max values -

javascript - Generating Dynamic jQuery Slider with dynamic min and max values -

i have project requires end user select photographer , associated roll numbers different each photographer (data brought in json database phone call on page load , dropped javascript array -- quick display of values). have created jsfiddle need dynamically created slider not move after created. sure has min , max values "seems" correct. autocomplete section displays photographer selection , dynamically creates slider below existing html element. have removed lot of extraneous code i'm using basics solve problem.

[jsfiddle link] http://jsfiddle.net/sn63w/2/

(ommiting info array named 'photographer' - in jsfiddle link) $(function () { $("#photographer-label").autocomplete({ minlength: 0, source: photographer, focus: function (event, ui) { $('#photographer-label').val(ui.item.label); homecoming 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); // 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 insert hard coded number within min , max values slider works correctly. values (according alert box) seem correct. missing? know simple reply having big brain cramp it.

p.s. side issue, want autocomplete display "label" , not "data" when remove focus slider, doesn't seem doing that. isn't such big deal.

it's because json info string, rid of quotation marks values e.g.

{ "photographer_id": "2", "label": "tommy remain (ts)", "value": "ts", "rollnum_from": 1, "rollnum_to": 10 }

instead of

{ "photographer_id": "2", "label": "tommy remain (ts)", "value": "ts", "rollnum_from": "1", "rollnum_to": "10" }

here jsfiddle,

http://jsfiddle.net/ufv9t/1/

note: changed "change" "slide" , added "value" , $( "#rollnum" ).val( $( "#rollnum-slider" ).slider( "value" ) ); number shows on initial load of slider, not necessary illustration work.

javascript jquery-ui