Ползунок ионного диапазона не работает

Я пытаюсь внедрить этот слайдер на свою веб-страницу:

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

Похоже, в консоль не выдается никаких ошибок.

Источник

0 ответов 

<!--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>
Источник
Другие вопросы по тегам