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

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -