Change range settings to [default, min, max, step]

js/usercss.js

@@ -221,10 +221,10 @@ var usercss = (() => {
         state.errorPrefix = 'Invalid JSON: ';
         parseJSONValue(state);
         state.errorPrefix = '';
-        // [ start, end, step, default ]
+        // [default, start, end, step] (start, end & step are optional)
-        if (Array.isArray(state.value) && state.value.length === 4) {
+        if (Array.isArray(state.value) && state.value.length) {
+          result.default = state.value.shift();
           result.range = state.value;
-          result.default = state.value[3];
         } else {
           // not a range, fallback to text
           result.type = 'text';

manage/config-dialog.css

@@ -94,11 +94,30 @@
   flex-shrink: 0;
 }
 
-.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child),
+.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
-.current-value {
   margin-right: 4px;
 }
 
+.current-value {
+  outline: 1px solid rgba(128, 128, 128, 0.5);
+  padding: 2px 4px;
+  margin-right: 4px;
+}
+
+.config-range span {
+  line-height: 22px;
+}
+
+.current-range:before {
+  content: attr(data-min);
+  padding-right: .25em;
+}
+
+.current-range:after {
+  content: attr(data-max);
+  padding-left: .25em;
+}
+
 .config-body label:not(.nondefault) .config-reset-icon {
   visibility: hidden;
 }

manage/config-dialog.js

@@ -266,14 +266,23 @@ function configDialog(style) {
             oninput: updateVarOnInput,
             onfocus: selectAllOnFocus,
           };
+          const dataset = {};
           if (va.type === 'range') {
-            options.min = va.range[0];
-            options.max = va.range[1];
-            options.step = va.range[2];
             options.value = va.default;
+            if (typeof va.range[0] !== 'undefined') {
+              options.min = dataset.min = va.range[0];
+            }
+            if (typeof va.range[1] !== 'undefined') {
+              options.max = dataset.max = va.range[1];
+            }
+            if (va.range[2]) {
+              options.step = va.range[2];
+            }
             children = [
               $create('span.current-value', {textContent: va.value}),
+              $create('span.current-range', {dataset}, [
                 va.input = $create('input.config-value', options),
+              ])
             ];
           } else {
             children = [
@@ -302,7 +311,7 @@ function configDialog(style) {
   function updateVarOnChange() {
     this.va.value = this.type !== 'checkbox' ? this.value : this.checked ? '1' : '0';
     if (this.type === 'range') {
-      $('.current-value', this.parentNode).textContent = this.va.value;
+      $('.current-value', this.closest('.config-range')).textContent = this.va.value;
     }
   }
 
@@ -329,7 +338,7 @@ function configDialog(style) {
       } else if (va.type === 'checkbox') {
         va.input.checked = Number(value);
       } else if (va.type === 'range') {
-        const span = $('.current-value', va.input.parentNode);
+        const span = $('.current-value', va.input.closest('.config-range'));
         va.input.value = value;
         if (span) {
           span.textContent = value;