Bootstrap滑块不可见

时间:2016-10-11 19:05:52

标签: javascript css twitter-bootstrap bootstrap-slider

我正在尝试在我正在开发的网站上使用此引导滑块,但它根本不显示:slinder 我在这里创建了一个plunker来演示这个问题:Plunker有谁知道如何解决这个问题?

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.js"></script>
    <script src="script.js"></script>
  </body> 
</html>

CSS

#ex1Slider .slider-selection {
    background: #BABABA;
}

JavaScript的:

var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

1 个答案:

答案 0 :(得分:1)

您还需要包附带的样式表。将此添加到您的头标记:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.css" />