Форум

petia223 · #1 (**permalink**) 20.02.2017, 15:47

Добрый день всем.
Столкнулся с проблемой, перенося страницу сайта на Wordpress-плагин ion range slider не работает. То есть, поле под него создаётся, но скрипт не срабатывает. Jquery подключена, остальные скрипты работают.

Код подключения jquery и скриптов

<head>
<script src="https://vapemood.ru/wp-content/uploads/calc/jquery.min.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/main.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/save.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/kt-rgb.js"></script>
<!-- Slider -->
<link rel="stylesheet" href="https://vapemood.ru/wp-content/uploads/calc/normalize.min.css" type="text/css" />
<link rel="stylesheet" href="https://vapemood.ru/wp-content/uploads/calc/ion.rangeSlider.css" type="text/css" />
<link rel="stylesheet" href="https://vapemood.ru/wp-content/uploads/calc/ion.rangeSlider.skinNice.css" type="text/css" />
<script src="https://vapemood.ru/wp-content/uploads/calc/ion.rangeSlider.min.js"></script>
</head>

Код вызова скрипта и его параметров

<script>
    $(document).ready(function(){
        $("#range_1").ionRangeSlider({
            min: 3,
            max: 8,
            from: 3.7,
            to: 3.7,
            type: 'single',
            step: 0.05,
            prefix: "Battery: ",
            postfix: "v",
            gridMargin: 11,
            prettify: true,
hasGrid: true,        // массив предустановленных значений
    onLoad: function (obj) {        // callback, вызывается при запуске и обновлении
        compute(this);
    },
    onChange: function (obj) {      // callback, вызывается при каждом изменении состояния
        compute(this);
    },
    onFinish: function (obj) {      // callback, вызывается один раз в конце использования
        compute(this);
    }
            
        });
    });
</script>

Подумал, может что нибудь не правильно сделал, скачал демо страничку для примера(идёт в архиве вместе с плагином)-она тоже не работает. Помогите подружить скрипт с Wordpress

Ps: вот код демо страницы

<!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="https://vapemood.ru/wp-content/uploads/calculator/normalize.min.css" />
    <link rel="stylesheet" href="https://vapemood.ru/wp-content/uploads/calculator/ion.rangeSlider.css" />
    <link rel="stylesheet" href="https://vapemood.ru/wp-content/uploads/calculator/ion.rangeSlider.skinNice.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="https://vapemood.ru/wp-content/uploads/calculator/ion.rangeSlider.min.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>

рони · #2 (**permalink**) 20.02.2017, 16:28

Сообщение от petia223

вот код демо страницы

нет jquery и css
на рабочем нет css и функции compute
если добавить всё заработает

рони · #3 (**permalink**) 20.02.2017, 16:38

petia223,
https://cdnjs.com/libraries/ion-rangeslider

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

    <title>Ion.RangeSlider - test</title>
<script src="https://vapemood.ru/wp-content/uploads/calc/jquery.min.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/main.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/save.js"></script>
<script src="https://vapemood.ru/wp-content/uploads/calc/kt-rgb.js"></script>
<!-- Slider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/normalize.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinNice.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.min.js"></script>

<script>
    $(document).ready(function(){
        $("#range_1").ionRangeSlider({
            min: 3,
            max: 8,
            from: 3.7,
            to: 3.7,
            type: 'single',
            step: 0.05,
            prefix: "Battery: ",
            postfix: "v",
            gridMargin: 11,
            prettify: true,
hasGrid: true,        // массив предустановленных значений
    onLoad: function (obj) {        // callback, вызывается при запуске и обновлении
       // compute(this);
    },
    onChange: function (obj) {      // callback, вызывается при каждом изменении состояния
       // compute(this);
    },
    onFinish: function (obj) {      // callback, вызывается один раз в конце использования
      //  compute(this);
    }

        });
    });
</script>
</head>
<body>
<!-- Page contents -->
<div style="position: relative; padding: 200px;">

    <div>
        <input type="text" id="range_1" value="" name="range_1" />
    </div>
</div>
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript