Add number & range variables. See #492

js/usercss.js

@@ -29,7 +29,7 @@ var usercss = (() => {
     ['version', 0],
   ]);
   const MANDATORY_META = ['name', 'namespace', 'version'];
-  const META_VARS = ['text', 'color', 'checkbox', 'select', 'dropdown', 'image'];
+  const META_VARS = ['text', 'color', 'checkbox', 'select', 'dropdown', 'image', 'number', 'range'];
   const META_URLS = [...KNOWN_META.keys()].filter(k => k.endsWith('URL'));
 
   const BUILDER = {
@@ -203,6 +203,22 @@ var usercss = (() => {
         break;
       }
 
+      case 'range': {
+        state.errorPrefix = 'Invalid JSON: ';
+        parseJSONValue(state);
+        state.errorPrefix = '';
+        // [ start, end, step, default ]
+        if (Array.isArray(state.value) && state.value.length === 4) {
+          result.range = state.value;
+          result.default = state.value[3];
+        } else {
+          // not a range, fallback to text
+          result.type = 'text';
+          result.default = state.value;
+        }
+        break;
+      }
+
       case 'dropdown':
       case 'image': {
         if (text[re.lastIndex] !== '{') {
@@ -235,7 +251,7 @@ var usercss = (() => {
       }
 
       default: {
-        // text, color
+        // text, color, number
         parseStringToEnd(state);
         result.default = state.value;
       }

manage/config-dialog.css

@@ -94,7 +94,8 @@
   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;
 }
 

manage/config-dialog.js

@@ -213,7 +213,7 @@ function configDialog(style) {
         ])
       ]);
     for (const va of vars) {
-      let children;
+      let children, options;
       switch (va.type) {
         case 'color':
           children = [
@@ -259,14 +259,27 @@ function configDialog(style) {
           break;
 
         default:
-          children = [
+          options = {
-            va.input = $create('input.config-value', {
+            va,
-              va,
+            type: va.type,
-              type: 'text',
+            onchange: updateVarOnChange,
-              onchange: updateVarOnChange,
+            oninput: updateVarOnInput,
-              oninput: updateVarOnInput,
+          };
-            }),
+          if (va.type === 'range') {
-          ];
+            options.min = va.range[0];
+            options.max = va.range[1];
+            options.step = va.range[2];
+            options.value = va.default;
+            children = [
+              $create('span.current-value', {textContent: va.value}),
+              va.input = $create('input.config-value', options),
+            ];
+          } else {
+            children = [
+              va.input = $create('input.config-value', options),
+            ];
+          }
+
           break;
       }
 
@@ -287,6 +300,9 @@ 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;
+    }
   }
 
   function updateVarOnInput(event, debounced = false) {
@@ -307,9 +323,14 @@ function configDialog(style) {
         }
       } else if (va.type === 'checkbox') {
         va.input.checked = Number(value);
-      } else {
-        va.input.value = value;
       }
+      if (va.type === 'range') {
+        const span = $('.current-value', va.input.parentNode);
+        if (span) {
+          span.textContent = value;
+        }
+      }
+      va.input.value = value;
       if (!prefs.get('config.autosave')) {
         renderValueState(va);
       }