Make slider labels clickable in the "Update Period & Grace" dialog

Fixes: #1039

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 - Remove `prunenotifications` management command (now cleaned up automatically)
 - Update settings.py to read SECURE_PROXY_SSL_HEADER from env vars
 - Remove LINE Notify onboarding form (as LINE Notify is shutting down on Apr 1, 2025)
+- Make slider labels clickable in the "Update Period & Grace" dialog (#1039)
 
 ### Bug Fixes
 - Update sqlite settings to avoid "Database is locked" errors (#1057)

static/css/update_timeout_modal.css

@@ -38,7 +38,7 @@
 }
 
 #period-slider .noUi-connect {
-  background: #22bc66;
+    background: #22bc66;
 }
 
 #grace-slider {
@@ -50,9 +50,14 @@
 }
 
 #period-slider .noUi-value, #grace-slider .noUi-value {
+    cursor: pointer;
     color: var(--text-muted);
 }
 
+#period-slider .noUi-value:hover, #grace-slider .noUi-value:hover {
+    color: var(--text-color);
+}
+
 .update-timeout-terms {
     color: var(--text-muted);
 }

static/js/update-timeout-modal.js

@@ -106,16 +106,26 @@ $(function () {
         }
     });
 
-    // Update inputs and the hidden field when user slides the period slider
-    periodSlider.noUiSlider.on("slide", function(a, b, value) {
-        var rounded = Math.round(value);
-        $("#update-timeout-timeout").val(rounded);
-
-        var parsed = secsToUnits(rounded);
+    function setPeriod(secs) {
+        // Set the hidden form field
+        $("#update-timeout-timeout").val(secs);
+        // Set the visible value+units form fields
+        var parsed = secsToUnits(secs);
         period.value = parsed.value;
         periodUnit.value = parsed.unit;
+    }
+
+    // Update inputs and the hidden field when user slides the period slider
+    periodSlider.noUiSlider.on("slide", function(a, b, value) {
+        setPeriod(Math.round(value));
     });
 
+    // Update slider, inputs and the hidden field when user clicks slider labels
+    $("#period-slider .noUi-value").on("click", function() {
+        periodSlider.noUiSlider.set(this.dataset.value);
+        setPeriod(this.dataset.value);
+    })
+
     // Update the slider and the hidden field when user changes period inputs
     $("#update-timeout-modal .period-input").on("keyup change", function() {
         var secs = Math.round(period.value * periodUnit.value);
@@ -150,16 +160,26 @@ $(function () {
         }
     });
 
-    // Update inputs and the hidden field when user slides the grace slider
-    graceSlider.noUiSlider.on("slide", function(a, b, value) {
-        var rounded = Math.round(value);
-        $("#update-timeout-grace").val(rounded);
-
-        var parsed = secsToUnits(rounded);
+    function setGrace(secs) {
+        // Set the hidden form field
+        $("#update-timeout-grace").val(secs);
+        // Set the visible value+units form fields
+        var parsed = secsToUnits(secs);
         grace.value = parsed.value;
         graceUnit.value = parsed.unit;
+    }
+
+    // Update inputs and the hidden field when user slides the grace slider
+    graceSlider.noUiSlider.on("slide", function(a, b, value) {
+        setGrace(Math.round(value));
     });
 
+    // Update slider, inputs and the hidden field when user clicks slider labels
+    $("#grace-slider .noUi-value").on("click", function() {
+        graceSlider.noUiSlider.set(this.dataset.value);
+        setGrace(this.dataset.value);
+    })
+
     // Update the slider and the hidden field when user changes grace inputs
     $("#update-timeout-modal .grace-input").on("keyup change", function() {
         var secs = Math.round(grace.value * graceUnit.value);