如何在gentelella模板中启动离子范围滑块功能

Question

我对如何初始化一些基本的js组件（例如“网格滑块”）感到困惑：

包含在laravel软件包中的网址： https ://colorlib.com/polygon/gentelella/form_advanced.html

它来自此插件： http : //ionden.com/a/plugins/ion.rangeSlider/en.html

那是我的代码：

        <input type="text" id="test_range" name="example_name" value="" />

 $(document).ready(function(e) {
        $('#tabS').DataTable();
        $("#test_range").ionRangeSlider({
            min: 100,
            max: 1000,
            from: 550});});

我尝试了两种方法：

1. 没有明确的导入错误是：
2. 在子视图中的“ @stack('script') ”部分中导入CDN，如下所示：

SRC = “https://cdnjs.cloudflare.com/ajax/libs/ion-angeslider/2.2.0/js/ion.rangeSlider.min.js”>

错误是这样的：

我如何正确初始化此组件？

Answer 1

您需要满足以下先决条件：

• css： ion.rangeSlider.min.css
• 主题： ion.rangeSlider.skinFlat.min.css
• jQuery的
• 和js： ion.rangeSlider.min.js

ion-rangeslider cdn的来源： https ://cdnjs.com/libraries/ion-rangeslider

工作片段：

 $("#range_02").ionRangeSlider({ min: 100, max: 1000, from: 550 }); 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.min.css"> <input id="range_02" class="irs-hidden-input" tabindex="-1" readonly=""> <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script> 

对于gentelella ，他们在源代码中使用它：

$(".range_time24").ionRangeSlider({
  min: +moment().subtract(12, "hours").format("X"),
  max: +moment().format("X"),
  from: +moment().subtract(6, "hours").format("X"),
  grid: true,
  force_edges: true,
  prettify: function(num) {
    var m = moment(num, "X");
    return m.format("Do MMMM, HH:mm");
  }
});

可以看出，它们大量使用了moment函数，这是先决条件。 确切地说是JS时刻 。 也导入该文件，您应该不再有问题