Слайдер пользовательского интерфейса JQuery не отображается при вызове с использованием innerHTML

Я определил функцию в javascript для отображения слайдера jQuery следующим образом:

<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>

Я использую это в своем html-коде следующим образом:

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

В приведенном выше коде отображается ползунок, и когда я его передвигаю, я вижу, что значения меняются. В принципе, вроде все работает нормально.

Но затем я добавил еще одну функцию writeQuestions() в свой <script> следующим образом:

<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>

И теперь, когда я запускаю html следующим образом:

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

Ползунок не отображается. Почему?? Причину, по которой я это делаю, трудно объяснить, так как мне нужно добавить множество вещей в функцию writeQuestions (), и я хочу использовать это. Мне кажется, что команда .innerHTML вызывает некоторые проблемы. Есть идеи, как я могу это решить?