Creating Range Sliders dynamically does't work!

Questions
1

Hi,

I’m trying to use the following code to create range sliders but it doesn’t seem to work!

var range = '<div class="list simple-list">' +
            '<ul>' +
              '<li>' +
                '<div class="item-cell width-auto flex-shrink-0">' +
                  '<i class="icon f7-icons if-not-md">speaker_fill</i>' +
                  '<i class="icon material-icons md-only">volume_mute</i>' +
                '</div>' +
                '<div class="item-cell flex-shrink-3">' +
          
                  '<div class="range-slider d-range">' +
                    '<input type="range" min="0" max="100" step="1" value="10">' +
                  '</div>' +
                '</div>' +
                '<div class="item-cell width-auto flex-shrink-0">' +
                  '<i class="icon f7-icons if-not-md">speaker_3_fill</i>' +
                  '<i class="icon material-icons md-only">volume_up</i>' +
                '</div>' +
              '</li>' +
            '</ul>' +
          '</div>';

          $('#formContent').append(range);

I get the icons but the range slider is not being rendered at all!

2

And it won’t work because you need to init range slider after this content has been added to DOM, using app.range.create method Range Slider | Framework7 Documentation