Merge pull request #3 from gruz/patch-1

Makes the Range field work with Orchid listeners

resources/js/controllers/range_controller.js

@@ -1,8 +1,16 @@
 export default class extends window.Controller {
     connect() {
         let value = this.data.get('value');
-        $(this.element.querySelector(".js-range-slider")).ionRangeSlider();
-        let range = $(".js-range-slider").data("ionRangeSlider");
+
+        let input = this.element.querySelector(".js-range-slider");
+
+        $(input).ionRangeSlider({
+            onFinish: function (data) {
+                input.dispatchEvent(new Event('change'));
+            },
+        });
+
+        let range = $(input).data("ionRangeSlider");
 
         if (value !== null) {
             let [from, to] = value.split(';');

resources/views/fields/range.blade.php

@@ -1,12 +1,13 @@
 @component($typeForm, get_defined_vars())
     <div data-controller="range" data-range-value="{{$value}}">
         <input type="text" class="js-range-slider"  {{$attributes}}
-        data-type="double"
+               data-type="{{$type}}"
                data-min="{{$min}}"
                data-max="{{$max}}"
                data-from="{{$from}}"
                data-to="{{$to}}"
                data-grid="{{$hasGrid}}"
+               data-skin="{{$skin}}"
         />
     </div>
 @endcomponent

src/Fields/Range.php

@@ -23,7 +23,9 @@ class Range extends Field
         'max' => 1000,
         'from' => 0,
         'to' => 1000,
-        'hasGrid' => false
+        'hasGrid' => false,
+        'type' => 'double',
+        'skin' => 'flat',
     ];
 
     /**