Fix broken range pointers when values are empty

Author: erimicel

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.0.3
+
+* Fix broken range pointers if initial values are empty
+
 # 1.0.2
 
 * Fix range to slide on click

README.md

@@ -67,8 +67,8 @@ Now we can add `range-slider` component to our view;
   <input type="text" data-range-slider-target="inputMax" value="5" />
 
   <!-- OR erb -->
-  <%= form.text_field :range_min, data: { rangeSliderTarget: "inputMin" } %>
-  <%= form.text_field :range_max, data: { rangeSliderTarget: "inputMax" } %>
+  <%= form.text_field :range_min, data: { range_slider_target: "inputMin" } %>
+  <%= form.text_field :range_max, data: { range_slider_target: "inputMax" } %>
 
   <!-- To show value on different element => <span data-range-slider-target="value"></span> -->
 </div>
@@ -85,7 +85,7 @@ Now we can add `range-slider` component to our view;
   <input type="text" data-range-slider-target="inputMin" value="5" />
 
   <!-- OR erb -->
-  <%= form.text_field :range_min, data: { rangeSliderTarget: "inputMin" } %>
+  <%= form.text_field :range_min, data: { range_slider_target: "inputMin" } %>
 
   <!-- To show value on different element => <span data-range-slider-target="value"></span> -->
 </div>

index.html

@@ -56,7 +56,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
         <label class="block mb-2 text-sm font-medium text-gray-700 ">Example of single range
           slider</label>
 
-        <input type="text" data-range-slider-target="inputMin" value="5">
+        <input type="text" data-range-slider-target="inputMin">
       </div>
 
       <!-- Single Range Slider with markers -->
@@ -135,8 +135,8 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
         <label class="block mb-2 text-sm font-medium text-gray-700 ">Example of multi point range
           slider</label>
 
-        <input type="text" data-range-slider-target="inputMin" value="2">
-        <input type="text" data-range-slider-target="inputMax" value="5">
+        <input type="text" data-range-slider-target="inputMin">
+        <input type="text" data-range-slider-target="inputMax">
       </div>
 
       <!-- Multi Range Slider with Labels -->

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "stimulus-range-slider",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A range slider controller for Stimulus",
   "source": "./src/range_slider.js",
   "main": "./dist/stimulus-range-slider.cjs",

package.json

@@ -36,9 +36,8 @@ export default class extends Controller {
     this.step = 0;
     this.sliderMinValue = 0;
     this.sliderMaxValue = 0;
-    this.inputMinValue = 0;
-    this.inputMaxValue = 0;
-    this.valRange = null;
+    this.inputMinValue = null;
+    this.inputMaxValue = null;
     this.activePointer = null;
     this.isRange = false;
     this.isDisabled = false;
@@ -87,24 +86,28 @@ export default class extends Controller {
 
   setInitialValues() {
     this.step = Number(this.stepValue || 1);
-    this.valRange = this.valuesValue;
 
     if (this.step <= 0) return;
 
     if (this.hasInputMinTarget) {
       this.inputMin = this.inputMinTarget;
-      this.inputMinValue = Number(this.inputMin.value);
+
+      if (this.inputMin.value === "") {
+        this.inputMinValue = null;
+      } else {
+        this.inputMinValue = Number(this.inputMin.value);
+      }
       if (isNaN(this.inputMinValue)) {
         this.inputMinValue = this.inputMin.value;
       }
-
-      if (this.inputMinValue === "") return;
     }
 
     if (this.hasInputMaxTarget) {
       this.inputMax = this.inputMaxTarget;
 
-      if (this.inputMax.value instanceof String) {
+      if (this.inputMax.value === "") {
+        this.inputMaxValue = null;
+      } else if (this.inputMax.value instanceof String) {
         this.inputMaxValue = this.inputMax.value;
       } else {
         this.inputMaxValue = Number(this.inputMax.value);
@@ -116,14 +119,25 @@ export default class extends Controller {
     this.isDisabled = this.disabledValue;
     this.isRange = this.hasInputMaxTarget && this.hasInputMinTarget;
 
-    this.setRangeValues(this.valRange, this.step);
+    this.setRangeValues(this.valuesValue, this.step);
 
-    this.values.start = this.isRange
-      ? this.values.range.indexOf(this.inputMinValue)
-      : 0;
-    this.values.end = this.isRange
-      ? this.values.range.indexOf(this.inputMaxValue)
-      : this.values.range.indexOf(this.inputMinValue);
+    if (this.inputMin.value === "") {
+      this.values.start = 0;
+    } else {
+      this.values.start = this.isRange
+        ? this.values.range.indexOf(this.inputMinValue)
+        : 0;
+    }
+
+    if (this.hasInputMaxTarget && this.inputMax.value === "") {
+      this.values.end = this.values.range.length - 1;
+    } else {
+      this.values.end = this.isRange
+        ? this.values.range.indexOf(this.inputMaxValue)
+        : this.inputMin.value === ""
+        ? this.values.range.length - 1
+        : this.values.range.indexOf(this.inputMinValue);
+    }
   }
 
   setRangeValues(valueStr, step) {