0

I'm in confusion to how to initialize some basic js components, like the "grid slider": enter image description here

that is included in the package for laravel: https://colorlib.com/polygon/gentelella/form_advanced.html

and it comes from this plugin: http://ionden.com/a/plugins/ion.rangeSlider/en.html

that's my code:

        <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});});

I've tried 2 way:

  1. with no explict import the error is: enter image description here
  2. importing the cdn in the child view in the "@stack('script')" part like:

src="https://cdnjs.cloudflare.com/ajax/libs/ion-angeslider/2.2.0/js/ion.rangeSlider.min.js">

the erros is something like:

enter image description here

how can i correctly initialize this component?

JahStation
  • 893
  • 3
  • 15
  • 35

1 Answers1

1

You need these prerequisites:

  • the css: ion.rangeSlider.min.css
  • a theme: ion.rangeSlider.skinFlat.min.css
  • jquery
  • and the js: ion.rangeSlider.min.js

Source for ion-rangeslider cdn: https://cdnjs.com/libraries/ion-rangeslider

Working snippet:

$("#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>

In the case of gentelella, they use this in the source code:

$(".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");
  }
});

As can be seen, they heavily make use of moment function, which is a prerequisite. Moment JS to be exact. Import that too and you should no longer have issues

Adelin
  • 7,809
  • 5
  • 37
  • 65
  • I forgot to mention that the css in the option "2" is imported too and even jquery!and the erros is not on graphic but comes from genetellea.min.js! it seems like a mes in library imports – JahStation Jun 19 '18 at 13:38
  • Sorry but that's not the point of the question. You asked how to initialize the slider, I answered. If you have different question post a different question and let's close this one :) – Adelin Jun 19 '18 at 13:39
  • the question is "how to initialize it on gentelella template" – JahStation Jun 19 '18 at 13:40
  • from the second error it seems like you don't have [moment js](https://momentjs.com/) imported. **has nothing to do with slider**. Before downvoting consider wording your questions better. ugh.. – Adelin Jun 19 '18 at 13:43
  • I've tried to describe the whole enviroment and reporting errors, how can I be more specific? the problem is how ion-rangeslider interact with this template, and I dont know how to deal with... – JahStation Jun 19 '18 at 13:49
  • moment is in the vendor path too, but i cannot understand why is not workin, ive found the function above too browsing loaded class, but ive no idea about explict import...ill try thanks – JahStation Jun 19 '18 at 14:07