Question

我想动态创建bootstrap滑块，所以我决定使用dom创建一个。

现在我的js代码是这样的：

  const newItem = document.createElement('input');
  newItem.setAttribute('id', 'slider');
  newItem.setAttribute('type', 'text');
  newItem.setAttribute('data-provide', 'slider');
  newItem.setAttribute('data-slider-min', '1');
  newItem.setAttribute('data-slider-max', '3');
  newItem.setAttribute('data-slider-step', '1');
  newItem.setAttribute('data-slider-value', '1');
  newItem.setAttribute('data-slider-tooltip', 'hide');

但它只显示一个文本框，我使用Chrome开发工具检查元素，它看起来像这样：

<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">

我的配置似乎正确，因为我使用html成功创建了一个滑块，如下所示：

    <input
        type="text"
        data-provide="slider"
        data-slider-min="1"
        data-slider-max="3"
        data-slider-step="1"
        data-slider-value="3"
        data-slider-tooltip="hide"
    >

在bootstrap-slider中，它说：

使用data-provide =＆＃34;滑块＆＃34;创建一个输入元素。属性自动将其变成滑块。

所以问题似乎是bootstrap-slider没有解释我的属性。

Answer 1

我想你需要像这样初始化你的滑块（如果你没有使用jQuery）：

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
});

所以，在你的情况下，如果你还想构建一个动态输入然后附加一个滑块，你的整个代码将如下所示：

// Create an input element dynamically
var newItem = document.createElement('input');

const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);

// Instantiate a slider
var mySlider = new Slider(newItem, {
   // initial options object
   step: 1,    
   min: 1,
   max:3,
   value: 1,
   tooltip: 'hide'
 });

在这里，我为您构建了一个实时演示：https://jsfiddle.net/abhishekraj007/hdr253xb

Answer 2

        $(function () {
            var newItem = document.createElement('input');
            newItem.setAttribute('id', 'slider');
            newItem.setAttribute('type', 'text');
            newItem.setAttribute('data-provide', 'slider');
            newItem.setAttribute('data-slider-min', '1');
            newItem.setAttribute('data-slider-max', '3');
            newItem.setAttribute('data-slider-step', '1');
            newItem.setAttribute('data-slider-value', '1');
            newItem.setAttribute('data-slider-tooltip', 'hide');
            document.body.appendChild(newItem);
            $(newItem).slider();
        });

body{ padding: 10px;}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>

bootstrap滑块不能使用dom

2 个答案: