JQuery UI slider show but doesn't respond to events after the first click.

Question

I setup three sliders. One is a range, and the other two are regular. The sliders render on the page, but on first click they go to either min or max. After that they seem to be stuck. Adding console.log to the event handlers show that they don't respond to anymore events after the first click. There are no console errors either. I am not sure how to go about debugging this. What else can I 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>

Answer 1

Your mix max and values options expect integers, they're currently getting strings, so use parseInt() like 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 the updated/working version here. Or cut down on that repeated code and make it more efficient with a function, like this or a plugin method, like this.