在 Framework7 中动态渲染 javascript 中的范围滑块

Question

我想使用 Javascript 动态呈现范围滑块（将其附加到 Framework7 移动应用程序应用程序中的 div emptypage。

首先，我尝试添加一个简单的文本元素，效果很好（很抱歉，我找不到这段代码的源作者以给予适当的信任）。

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

... 我看到 Framework7 html 文件中添加了滑块，但页面上没有呈现（显示）滑块。

欢迎任何帮助。谢谢。

PS。我尝试了 @ii iml0sto1 在这里 @ best way to inject html using javascript 提出的方法，但这也不起作用。

PPS。 @Amit Mondal 提出的解决方案也没有用。我的猜测是 Framework7 引起的？所以我更新了我的问题以包含对该框架的引用。

PPPS。正确呈现其他类型的输入元素（文本和下拉问题）。

Answer 1

您可以运行下面的代码片段

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>

Answer 2

我遇到了完全相同的问题并在论坛上问了同样的问题。

诀窍是在添加 DOM 之后使用 init。

所以像往常一样创建您的 DOM，然后使用此代码：

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

.range-slider是滑块元素的class。

在 Framework7 中动态渲染 javascript 中的范围滑块

Dynamically rendering a range slider in javascript in Framework7

javascript

forms

html-framework-7

rangeslider