Support a default range value and improve logic when using steps. Closes #2328.

Author: jackmcdade

resources/js/components/fieldtypes/RangeFieldtype.vue

@@ -30,7 +30,23 @@ export default {
 
      data() {
         return {
-            val: this.value || (this.config.max - this.config.min) / 2
+            val: this.value || this.config.default || this.getDefault()
+        }
+    },
+
+    methods: {
+        getDefault() {
+            // Spec: https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)
+            if (this.config.max < this.config.min) return this.config.min;
+
+            var val = this.config.min + (this.config.max - this.config.min) / 2;
+
+            // make sure on a valid step
+            if (this.config.step) {
+                val = Math.floor(val / this.config.step) * this.config.step;
+            }
+
+            return val;
         }
     },
 

resources/lang/en/fieldtypes.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'any.config.default' => 'Set the default value.',
     'array.config.keys' => 'Set the array keys (variables) and optional labels.',
     'array.config.mode' => 'Dynamic mode gives the user control of the data while keyed mode does not.',
     'assets.config.allow_uploads' => 'Allow new file uploads.',

src/Fieldtypes/Range.php

@@ -25,14 +25,21 @@ protected function configFieldItems(): array
                 'instructions' => __('statamic::fieldtypes.range.config.min'),
                 'type' => 'integer',
                 'default' => 0,
-                'width' => 50,
+                'width' => 33,
             ],
             'max' => [
                 'display' => __('Max'),
                 'instructions' => __('statamic::fieldtypes.range.config.max'),
                 'type' => 'integer',
                 'default' => 100,
-                'width' => 50,
+                'width' => 33,
+            ],
+            'default' => [
+                'display' => __('Default'),
+                'instructions' => __('statamic::fieldtypes.any.config.default'),
+                'type' => 'integer',
+                'default' => null,
+                'width' => 33,
             ],
             'prepend' => [
                 'display' => __('Prepend'),