Dynamically rendering a range slider in javascript in Framework7

Question

I would like to render a range slider dynamically using Javascript (attaching it to the div emptypage in a Framework7 mobile app application.

First I tried to add a simple text element, which works (I am sorry I cannot find the source author of this piece of code anymore to give proper credit).

var div = document.getElementById('emptypage');
var form = document.createElement('form');
var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('placeholder', 'Name');
input1.setAttribute('name', 'routename');
input1.setAttribute('id', 'rname');
form.appendChild(input1);
div.appendChild(form);

However, after I changed the code in...

var div = document.getElementById('emptypage');
var form = document.createElement('form');
var input1 = document.createElement('input');
input1.setAttribute('id', 'test');
input1.setAttribute('type', 'range');
input1.setAttribute('min', 0);
input1.setAttribute('max', 100);
input1.setAttribute('step', 1);
input1.setAttribute('value', 50);
form.appendChild(input1);
div.appendChild(form);

... I see that the slider is added to the Framework7 html file, but the slider is not rendered (displayed) on the page.

Any help is welcome. Thank you.

PS. I tried the method that was proposed by @ii iml0sto1 here @ best way to inject html using javascript , but that did not work either.

PPS. The solution proposed by @Amit Mondal did not work either. My guess is that is is caused by Framework7? So I updated my question to include references to this framework.

PPPS. Other types of input elements (text and drop-down questions) are rendered properly.

Answer 1

I had the exact same issue and asked the same question on the forum.

The trick is to use the init AFTER you've added your DOM.

So create your DOM as you would normally and then use this code:

var range = app.range.create({
  el: '.range-slider',
  on: {
    change: function () {
      console.log('Range Slider value changed')
    }
  }
});

.range-slider is the class of the slider element.