为什么滑块在jquery中不起作用？

Question

您能告诉我为什么滑块在jquery中不起作用吗？ 我看到了这个演示，但是回调函数不会触发？ 为什么呢？

我从此网址获得帮助http://rangeslider.js.org/

这是我的代码

<!DOCTYPE html>
<html>

<head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <h1>Hello Plunker!</h1>
    <input type="range" min="10"
           max="1000"
           step="10"
           value="300" />
    <script>
        $(function () {
            console.log('====')
            $('input[type="range"]').rangeslider({
                // Feature detection the default is `true`.
                // Set this to `false` if you want to use
                // the polyfill also in Browsers which support
                // the native <input type="range"> element.
                polyfill: true,

                // Callback function
                onInit: function () {
                    console.log('init')
                },

                // Callback function
                onSlide: function (position, value) { },

                // Callback function
                onSlideEnd: function (position, value) {
                    console.log(value)
                }
            });
        })
    </script>
</body>
</html>

这是我的代码https://plnkr.co/edit/cbh60dJcvHhAoqDlLo9g?p=preview

回调函数为什么不触发？ 当我滑动滑块时

Answer 1

从您的示例中尚不清楚您是否要为Range Slider加载JS和CSS文件，因此这可能是问题的一部分。

另外，如果您希望默认显示它，则需要将polyfill: true,更改为polyfill: false, 。

 $(function () { $('input[type="range"]').rangeslider({ polyfill: false, onInit: function() { console.log('init') }, // Callback function onSlide: function(position, value) {}, // Callback function onSlideEnd: function(position, value) { console.log(value) } }); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css"> <h1>Hello Plunker!</h1> <input type="range" min="10" max="1000" step="10" value="300" />

为什么滑块在jquery中不起作用？

问题描述

1 个解决方案

解决方案1
0 2018-01-25 11:35:26

为什么滑块在jquery中不起作用？

问题描述

1 个解决方案

解决方案1 0 2018-01-25 11:35:26

解决方案1
0 2018-01-25 11:35:26