Tidy up code

app/javascript/controllers/knob_controller.js

@@ -3,26 +3,36 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "field", "option", "slider" ]
 
-  optionChanged(e) {
-    this.#setIndex(e.target.getAttribute("data-index"))
+  connect() {
+    this.#index = this.#selectedOption.dataset.index
   }
 
-  sliderChanged(e) {
-    const index = e.target.value
-    this.#setIndex(index)
-    this.#setValue(index)
+  optionChanged({ target }) {
+    this.#index = target.dataset.index
   }
 
-  #setIndex(index) {
+  sliderChanged({ target }) {
+    this.#index = target.value
+  }
+
+  get #selectedOption() {
+    return this.optionTargets.find(option => {
+      return option.checked
+    })
+  }
+
+  set #index(index) {
     this.fieldTarget.style.setProperty("--knob-index", `${index}`);
-    this.sliderTarget.value = index;
+    this.sliderTarget.value = index
   }
 
-  #setValue(index) {
-    const option = this.optionTargets.find(option => {
-      return option.dataset.index === index;
-    });
+  set #value(index) {
+    this.#optionForIndex(index).checked = true
+  }
 
-    option.checked = true;
+  #optionForIndex(index) {
+    return this.optionTargets.find(option => {
+      return option.dataset.index === index;
+    })
   }
 }