1

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

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

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

4

1 回答 1

2 
<!--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>
于 2019-04-10T03:09:58.050 回答