离子范围滑块不起作用

Question

我正在尝试将此滑块合并到我的网页中：

http://ionden.com/a/plugins/ion.rangeSlider/en.html

下载后，他们的示例脚本运行良好。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Ion.RangeSlider - test</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/ion.rangeSlider.css" />
    <link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" />
</head>
<body>

<!-- Page contents -->
<div style="position: relative; padding: 200px;">

    <div>
        <input type="text" id="range" value="" name="range" />
    </div>

</div>



<!-- All JS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>

<script>

    $(function () {

        $("#range").ionRangeSlider({
            hide_min_max: true,
            keyboard: true,
            min: 0,
            max: 5000,
            from: 1000,
            to: 4000,
            type: 'double',
            step: 1,
            prefix: "$",
            grid: true
        });

    });
</script>


</body>
</html>

可从以下位置下载此样本： http : //ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.0.6.zip

在Plnkr上复制相同的脚本会导致错误： http ://plnkr.co/edit/wUsGWwMSTczI8A4GVWrp?p=info

显然，控制台中没有抛出任何错误。

Answer 1

<!--Plugin CSS file with desired skin-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>


<input type="text" id="js-range-slider" name="my_range" value=""
    data-type="double"
    data-min="0"
    data-max="1000"
    data-from="200"
    data-to="500"
    data-grid="true"
/>

<script type="text/javascript">
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js',function(){
    $("#js-range-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
     });
  }); //script 
</script>

离子范围滑块不起作用

问题描述

1 个解决方案

解决方案1
0 2019-04-10 03:09:58

离子范围滑块不起作用

问题描述

1 个解决方案

解决方案1 0 2019-04-10 03:09:58

解决方案1
0 2019-04-10 03:09:58