jQuery UI slider doesn't show up when called using innerHTML

Question

I have defined a function in javascript to display a jQuery slider as follows:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script>

 function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
    loadSliders();
});
</script>

I use this in my html code as follows:

<span class="amount"> </span>
<div class="slider-range"> </div>

The above code displays a slider and when I slide it, I see the values changing as well. Basically, everything seems to work just fine.

But then, I added another function writeQuestions() to my <script> as follows:

<script>
function writeQuestions(){  
question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
document.getElementById("questions").innerHTML = question_html;
        }

function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
            loadSliders();
            writeQuestions();    
        });
</script>

And now when I run the html as follows:

<div id="questions"></div>

The slider is not displayed. Why?? The reason I'm doing this is hard to explain as I need to add loads of stuff in the writeQuestions() function and I want to able to use this. It seems to me that the .innerHTML command is causing some issues. Any ideas how can I resolve this?

Answer 1

The order of the functions is wrong. You are initializing the slider before it is created. See the comments below.

function writeQuestions() {
  question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
  document.getElementById("questions").innerHTML = question_html;
}

function loadSliders() {
  $(".slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function(event, ui) {
      $(this).parent().find(".amount").html(ui.values[0] + " - " + ui.values[1]);
    }
  });
}

$(document).ready(function() {
  writeQuestions(); // create slider first
  loadSliders(); // then initialize the slider
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="questions"></div>