Динамическое отображение ползунка диапазона в JavaScript в Framework7 - PullRequest
Новая
       36

Динамическое отображение ползунка диапазона в JavaScript в Framework7

0 голосов
/ 02 ноября 2019

Я хотел бы динамически визуализировать ползунок диапазона, используя Javascript (присоединяя его к div emptypage в приложении Framework7 для мобильных приложений.

Сначала я попытался добавить простой текстовый элемент, который работает(Я сожалею, что больше не могу найти автора исходного кода для правильной оценки). 

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

Однако после того, как я изменил код в ... 

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

... Я вижу, что слайдер добавлен в html-файл Framework7, но слайдер не отображается (не отображается) на странице.

Любая помощь приветствуется. Спасибо.

PS. Я попробовал метод, который был предложен @ii iml0sto1 здесь @ лучший способ внедрить html, используя javascript , но он тоже не сработал.

PPS. Решение, предложенное@Amit Mondal тоже не сработал. Я думаю, это вызвано Framework7? Поэтому я обновил свой вопрос, добавив ссылки на эту платформу.

1 Ответ

0 голосов
/ 02 ноября 2019

Вы можете запустить фрагмент кода ниже ?

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

var value = document.createElement('p');
value.setAttribute('id', 'sliderValue');
value.innerHTML = input1.value;

form.appendChild(input1);
div.appendChild(form);
div.appendChild(value);

// To update the slider value dynamically
input1.oninput = function() {
  value.innerHTML = this.value;
}
<html>

<body>
  <div id='emptypage'>
  </div>
</body>

</html>
...