代码之家  ›  专栏  ›  技术社区  ›  JahStation

如何初始化Gentelella模板中的离子范围滑块函数

  •  0
  • JahStation  · 技术社区  · 7 年前
    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=“”/>
    
    $(“测试范围”).ionRangeSlider({
    最大值:1000,
    

      如何正确初始化此组件?

      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. enter image description here
      2. @stack('script')“部分类似:

      错误是这样的:

      enter image description here

    1 回复  |  直到 7 年前
        1
  •  1
  •   Adelin    7 年前

    您需要这些先决条件:

    • CSS: ion.rangeSlider.min.css
    • 主题: ion.rangeSlider.skinFlat.min.css
    • 查询
    • 和JS: ion.rangeSlider.min.js

    离子范围滑块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 功能,这是一个先决条件。 Moment JS

    推荐文章