javascript - JQuery UI slider show but doesn't respond to events after the first click -
i setup 3 sliders. 1 range, , other 2 regular. sliders render on page, on first click go either min or max. after seem stuck. adding console.log event handlers show don't respond anymore events after first click. there no console errors either. not sure how go debugging this. else can try?
<script type='text/javascript'> jquery(function($) { $(".slide-container").each(function(i, v) { $(v).children(".slide").slider({ range: "min", animate: true, min: $(v).children(".min").html(), max: $(v).children(".max").html(), value: $(v).children(".value").html(), slide: function(event, ui) { $(v).children(".value").html(ui.value); true; } }); }); $(".range-container").each(function(i, v) { $(v).children(".range").slider({ range: true, animate: true, min: $(v).children(".min").html(), max: $(v).children(".max").html(), values: [$(v).children(".min-value").html(), $(v).children(".max-value").html()], slide: function(event, ui) { $(v).children(".min-value").html(ui.values[0]); $(v).children(".max-value").html(ui.values[1]); true; } }); }); }); </script> <div class='slide-container'> <div class='slide' id='password-strength-slide'></div> <div class='min'>0</div> <div class='max'>100</div> <div class='value'>80</div> </div> <div class='range-container'> <div class='range' id='password-length-range'></div> <div class='min'>4</div> <div class='max'>32</div> <div class='min-value'>8</div> <div class='max-value'>12</div> </div> <div class='range-container'> <div class='range' id='token-length-range'></div> <div class='min'>4</div> <div class='max'>16</div> <div class='min-value'>3</div> <div class='max-value'>4</div> </div>
your mix
max
, values
options expect integers, they're getting strings, use parseint()
this:
$(".range-container").each(function(i, v) { $(v).children(".range").slider({ range: true, animate: true, min: parseint($(v).children(".min").html(), 10), max: parseint($(v).children(".max").html(), 10), values: [parseint($(v).children(".min-value").html(), 10), parseint($(v).children(".max-value").html(), 10)], slide: function(event, ui) { $(v).children(".min-value").html(ui.values[0]); $(v).children(".max-value").html(ui.values[1]); } }); });
you can see updated/working version here. or cut down on repeated code , make more efficient function, like this or plugin method, like this.
Comments
Post a Comment