文章/答案/技术大牛

发布

社区首页 >问答首页 >MaterializeCSS noUiSlider范围不工作

问MaterializeCSS noUiSlider范围不工作
EN

Stack Overflow用户

提问于 2016-01-17 16:17:23

回答 1查看 4K关注 0票数 1

我正在尝试创建一个基于MaterialiseCSS的noUiSilder范围滑块。文档说：

为范围较宽的值添加范围滑块。这个数字被设置为0到100之间的数字。我们有两种不同类型的滑块。nouiSlider是我们修改过的第三方插件。要使用noUiSlider，您必须手动链接位于附加文件夹中的nouislider.css和nouislider.js文件。

我做了每件事，不幸的是，它显示的是缺陷HTML范围(就像链接中的那个)。

我的html：

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
        <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>




        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
        <script type="text/javasript" src="js/phonefinder.js"></script>
    </head>

    <body class="grey lighten-4">   
        <form>
            <div class="input-field">
                <p class="range-field">
                  <input type="range" id="test5" min="0" max="100" />
                </p>
            </div>
        </form>
    </body>
</html>

js/phonefinder.js：

$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
 start: [20, 80],
 connect: true,
 step: 1,
 range: {
   'min': 0,
   'max': 100
 },
 format: wNumb({
   decimals: 0
 })
});
});

我做错了什么？

materialize

nouislider

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-19 20:14:05

noUiSlider范围不是输入类型，应该是div。

所以：

    <form>
        <div class="input-field">
            <p class="range-field">
              <input type="range" id="test5" min="0" max="100" />
            </p>
        </div>
    </form>

应：

    <form>
        <div id="connect"></div>
    </form>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34840527

复制

相似问题

问MaterializeCSS noUiSlider范围不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MaterializeCSS noUiSlider范围不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MaterializeCSS noUiSlider范围不工作
EN