Connect the range slider

app/javascript/controllers/knob_controller.js

@@ -1,27 +1,29 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "wrapper" ]
+  static targets = [ "field", "option", "slider" ]
 
   optionChanged(e) {
-    const input = e.target
-    const value = input.value
-    const index = (input.getAttribute("data-index"))
-    this.wrapperTarget.style.setProperty("--knob-index", `${index}`);
+    this.#setIndex(e.target.getAttribute("data-index"))
   }
 
   sliderChanged(e) {
-    const sliderIndex = e.target.value
+    const index = e.target.value
+    this.#setIndex(index)
+    this.#setValue(index)
+    console.log(index)
+  }
+
+  #setIndex(index) {
+    this.fieldTarget.style.setProperty("--knob-index", `${index}`);
+    this.sliderTarget.value = index;
+  }
+
+  #setValue(index) {
+    const option = this.optionTargets.find(option => {
+      return option.dataset.index === index;
+    });
+
+    option.checked = true;
   }
 }
-
-
-// The slider has a range of 0-4. We can't add day values statically.
-// These 0-4 values are used to set the angle via css.
-// but, that if the range was simply used to set the value of the radio input.
-// OK, what if we get the knob and radio inputs working as expected, then…
-// When radio input changes, update the slider
-// when the slider changes, update the radio input
-
-// knob need an index, options have the index.
-// when option is changed, set i on main component