diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a22f2d2d5..684a8bf312 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@
 ### Changes
 
 * The `pickerOptions` sub property of a color field's configuration has been merged with it's parent `options` object.
+* Reworks `inline` and `micro` UI of some fields (color, range, select). Improve global inline style.
+* Makes the range input being a number all the time instead of a string that we convert manually.
 
 ## 4.11.2 (2024-12-29)
 
diff --git a/modules/@apostrophecms/asset/lib/globalIcons.js b/modules/@apostrophecms/asset/lib/globalIcons.js
index 709f2ce368..9b6c5334ae 100644
--- a/modules/@apostrophecms/asset/lib/globalIcons.js
+++ b/modules/@apostrophecms/asset/lib/globalIcons.js
@@ -61,8 +61,8 @@ module.exports = {
   'format-list-numbered-icon': 'FormatListNumbered',
   'format-quote-close-icon': 'FormatQuoteClose',
   'format-strikethrough-variant-icon': 'FormatStrikethroughVariant',
-  'format-superscript-icon': 'FormatSuperscript',
   'format-subscript-icon': 'FormatSubscript',
+  'format-superscript-icon': 'FormatSuperscript',
   'format-text-icon': 'FormatText',
   'format-underline-icon': 'FormatUnderline',
   'help-circle-icon': 'HelpCircle',
@@ -122,5 +122,6 @@ module.exports = {
   'unfold-more-horizontal-icon': 'UnfoldMoreHorizontal',
   'video-icon': 'Video',
   'view-column-icon': 'ViewColumn',
+  'water-off-icon': 'WaterOff',
   'web-icon': 'Web'
 };
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
index 8ec6be5dbd..f1da01d3fd 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
@@ -8,6 +8,13 @@
   >
     <template #body>
       <div class="apos-input-color">
+        <AposColorInfo
+          v-if="isInline"
+          class="apos-input-color__info apos-input-color__info--inline"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
         <div class="apos-input-color__ui">
           <AposContextMenu
             :button="buttonOptions"
@@ -24,17 +31,13 @@
             />
           </AposContextMenu>
         </div>
-        <div class="apos-input-color__info" data-apos-test="colorInfo">
-          {{ valueLabel }}
-          <AposButton
-            v-if="next"
-            type="quiet"
-            label="apostrophe:clear"
-            class="apos-input-color__clear"
-            :modifiers="['no-motion']"
-            @click="clear"
-          />
-        </div>
+        <AposColorInfo
+          v-if="!isInline"
+          class="apos-input-color__info"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
       </div>
     </template>
   </AposInputWrapper>
@@ -42,8 +45,13 @@
 
 <script>
 import AposInputColorLogic from '../logic/AposInputColor';
+import AposColorInfo from '../lib/AposColorInfo.vue';
+
 export default {
   name: 'AposInputColor',
+  components: {
+    AposColorInfo
+  },
   mixins: [ AposInputColorLogic ]
 };
 </script>
@@ -54,16 +62,13 @@ export default {
     align-items: center;
   }
 
-  .apos-input-color__clear {
-    margin-left: 10px;
-  }
-
   .apos-input-color__info {
-    @include type-base;
+    margin-left: 15px;
 
-    & {
-      margin-left: 15px;
-      color: var(--a-text-primary);
+    &--inline {
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
+
 </style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
new file mode 100644
index 0000000000..41f4eb82ac
--- /dev/null
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="apos-color-info" data-apos-test="colorInfo">
+    <span v-if="!isMicro">
+      {{ label }}
+    </span>
+    <AposButton
+      v-if="!isMicro && value"
+      type="quiet"
+      :label="'apostrophe:clear'"
+      class="apos-color-info__clear-btn"
+      :modifiers="['no-motion']"
+      @click="emit('clear')"
+    />
+    <AposIndicator
+      v-else-if="value"
+      class="apos-color-info__clear-icon"
+      icon="water-off-icon"
+      @click="emit('clear')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: null
+  },
+  isMicro: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const label = computed(() => props.value || 'None Selected');
+const emit = defineEmits([ 'clear' ]);
+</script>
+
+<style lang="scss">
+  .apos-color-info {
+    @include type-base;
+
+    & {
+      color: var(--a-text-primary);
+    }
+  }
+
+  .apos-color-info__clear-btn {
+    margin-left: 10px;
+  }
+
+  .apos-color-info__clear-icon {
+    cursor: pointer;
+    color: var(--a-base-2);
+
+    &:hover {
+      color: var(--a-primary);
+    }
+  }
+</style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
index d294107d50..c511c8b639 100644
--- a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
+++ b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
@@ -16,6 +16,12 @@ export default {
     };
   },
   computed: {
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
+    isInline() {
+      return this.modifiers.includes('inline');
+    },
     pickerValue() {
       return this.next || this.defaultValue;
     },
@@ -33,13 +39,6 @@ export default {
     options() {
       return this.field?.options || {};
     },
-    valueLabel() {
-      if (this.next) {
-        return this.next;
-      } else {
-        return 'None Selected';
-      }
-    },
     classList() {
       return [
         'apos-input-wrapper',
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index 1dffca0090..353f351cad 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -6,12 +6,30 @@
     :uid="uid"
     :display-options="displayOptions"
   >
+    <template v-if="isMicro" #info>
+      <div
+        class="apos-range__value"
+        aria-hidden="true"
+      >
+        <AposIndicator
+          v-if="isSet"
+          class="apos-range__clear"
+          icon="close-icon"
+          @click="unset"
+        />
+        <div class="apos-range__value-input">
+          <span v-if="isSet">
+            {{ valueLabel }}
+          </span>
+        </div>
+      </div>
+    </template>
     <template #body>
       <div class="apos-input-wrapper">
         <div v-apos-tooltip="tooltip" class="apos-range">
           <input
             :id="uid"
-            v-model="next"
+            v-model.number="next"
             type="range"
             :min="field.min"
             :max="field.max"
@@ -19,7 +37,7 @@
             class="apos-range__input"
             :disabled="field.readOnly"
           >
-          <div class="apos-range__scale">
+          <div v-if="!isMicro" class="apos-range__scale">
             <span>
               <span class="apos-sr-only">
                 {{ $t('apostrophe:minLabel') }}
@@ -35,6 +53,7 @@
           </div>
         </div>
         <div
+          v-if="!isMicro"
           class="apos-range__value"
           aria-hidden="true"
           :class="{'apos-is-unset': !isSet}"
@@ -80,14 +99,39 @@ export default {
       pointer-events: none;
     }
 
-    .apos-range__clear {
-      margin-left: 5px;
+    .apos-field--micro & {
+      display: flex;
+      padding-top: 0;
+      min-width: auto;
+    }
+  }
+
+  .apos-range__value-input {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 5px 0 5px 5px;
+    border-radius: 5px;
+    min-height: 25px;
+  }
+
+  .apos-range__clear {
+    margin-left: 5px;
+
+    .apos-field--micro & {
+      cursor: pointer;
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
 
   .apos-range {
     flex-grow: 1;
     margin-right: 20px;
+
+    .apos-field--micro & {
+      margin-right: 0;
+    }
   }
 
   .apos-range__scale {
@@ -121,6 +165,10 @@ export default {
         color: var(--a-text-primary);
       }
     }
+
+    .apos-field--micro {
+      margin: 0;
+    }
   }
 
   .apos-range__input[disabled] {
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
index 2fd2ce1e4a..035625d003 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
@@ -37,9 +37,7 @@
               data-apos-test="field-tag"
             />
             <span
-              v-if="
-                (field.help || field.htmlHelp) && displayOptions.helpTooltip
-              "
+              v-if="(field.help || field.htmlHelp) && displayOptions.helpTooltip"
               data-apos-test="field-help-tooltip"
               class="apos-field__help-tooltip"
             >
@@ -64,27 +62,32 @@
               />
             </span>
           </span>
-          <span
-            data-apos-test="field-meta-wrapper"
-            class="apos-field__label-meta"
-          >
-            <slot name="meta">
-              <component
-                :is="name"
-                v-for="{ name, namespace, data } in metaComponents"
-                :key="name"
-                :field="field"
-                :items="items"
-                :namespace="namespace"
-                :meta="data"
-                :meta-raw="meta"
-                :data-apos-test-component="name"
-                :data-apos-test-namespace="namespace"
-                data-apos-test="field-meta"
-                @replace-field-value="replaceFieldValue"
-              />
-            </slot>
-          </span>
+          <div>
+            <div v-if="hasExtraInfo" class="apos-field__label-extra-info">
+              <slot name="info" />
+            </div>
+            <span
+              data-apos-test="field-meta-wrapper"
+              class="apos-field__label-meta"
+            >
+              <slot name="meta">
+                <component
+                  :is="name"
+                  v-for="{ name, namespace, data } in metaComponents"
+                  :key="name"
+                  :field="field"
+                  :items="items"
+                  :namespace="namespace"
+                  :meta="data"
+                  :meta-raw="meta"
+                  :data-apos-test-component="name"
+                  :data-apos-test-namespace="namespace"
+                  data-apos-test="field-meta"
+                  @replace-field-value="replaceFieldValue"
+                />
+              </slot>
+            </span>
+          </div>
         </component>
         <!-- eslint-disable vue/no-v-html -->
         <p
@@ -92,7 +95,6 @@
           class="apos-field__help"
           v-html="$t(field.help || field.htmlHelp)"
         />
-        <!-- eslint-enable vue/no-v-html -->
         <slot name="additional" />
       </div>
       <slot name="body" />
@@ -104,7 +106,7 @@
         {{ getTranslatedErrorMessage(errorMessage) }}
       </div>
     </component>
-    <!-- CSS Escape hatch for additional interfaces like relatipnship managers -->
+    <!-- CSS Escape hatch for additional interfaces like relationship managers -->
     <slot name="secondary" />
   </div>
 </template>
@@ -190,6 +192,10 @@ export default {
   }
 }
 
+.apos-field__label-meta:empty {
+  display: none;
+}
+
 .apos-field__help {
   @include type-base;
 
@@ -235,18 +241,22 @@ export default {
 .apos-field--inline {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   .apos-field__label {
     margin-bottom: 0;
   }
 
-  .apos-field__info,
-  .apos-input-wrapper {
-    width: 48%;
+  .apos-field__info {
+    margin-right: 30px;
   }
 
   .apos-field__info {
-    margin-right: 4%;
+    flex-shrink: 1;
+  }
+
+  .apos-input-wrapper {
+    flex-grow: 1;
   }
 
   &.apos-field--range {
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
index 5ca16fd01a..f2fbd4b4df 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
@@ -5,10 +5,14 @@ export default {
   mixins: [ AposInputMixin ],
   data() {
     return {
+      next: this.initNext(),
       unit: this.field.unit || ''
     };
   },
   computed: {
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
     minLabel() {
       return this.field.min + this.unit;
     },
@@ -21,27 +25,26 @@ export default {
     isSet() {
       // Detect whether or not a range is currently unset
       // Use this flag to hide/show UI elements
-      if (this.next >= this.field.min) {
+      if (typeof this.next === 'number' && this.next >= this.field.min) {
         return true;
       } else {
         return false;
       }
     }
   },
-  mounted() {
-    // The range spec defaults to a value of midway between the min and max
-    // Example: a range with an unset value and a min of 0 and max of 100 will become 50
-    // This does not allow ranges to go unset :(
-    if (!this.next && this.next !== 0) {
-      this.unset();
-    }
-  },
   methods: {
-    // Default to a value outside the range when no def is defined,
-    // to be used as a flag.
-    // The value will be set to null later in validation
+    initNext() {
+      if (this.modelValue && typeof this.modelValue.data === 'number') {
+        return this.modelValue.data;
+      }
+
+      return this.getDefault();
+    },
     unset() {
-      this.next = typeof this.field.def === 'number'
+      this.next = this.getDefault();
+    },
+    getDefault() {
+      return typeof this.field.def === 'number'
         ? this.field.def
         : this.field.min - 1;
     },
@@ -52,9 +55,6 @@ export default {
         }
       }
       return false;
-    },
-    convert(value) {
-      return parseFloat(value);
     }
   }
 };
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
index 7b286fdc16..d642a72781 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
@@ -143,6 +143,9 @@ export default {
             data: meta[namespace] || {}
           };
         });
+    },
+    hasExtraInfo() {
+      return this.$slots.info;
     }
   },
   mounted: function () {
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js b/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
index 076e69e4c0..9341dd8097 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
@@ -53,12 +53,18 @@ export default {
         return getConditionTypesObject();
       }
     },
+    // Modifiers applied to all fields
     modifiers: {
       type: Array,
       default() {
         return [];
       }
     },
+    // Modifiers applied to specified field types
+    fieldModifiers: {
+      type: Object,
+      default: () => ({})
+    },
     triggerValidation: Boolean,
     utilityRail: {
       type: Boolean,
@@ -128,10 +134,7 @@ export default {
               data: this.modelValue.data[item.name]
             },
             serverError: this.serverErrors && this.serverErrors[item.name],
-            modifiers: [
-              ...(this.modifiers || []),
-              ...(item.modifiers || [])
-            ]
+            modifiers: this.computeModifiers(item)
           }
         };
       }, {});
@@ -339,6 +342,10 @@ export default {
     generateItemUniqueKey(field) {
       return `${field.name}:${field._id ?? ''}:${this.modelValue?.data?._id ?? ''}`;
 
+    },
+    computeModifiers(field) {
+      const fieldModifiers = this.fieldModifiers[field.type] || this.modifiers;
+      return [ ...new Set(fieldModifiers.concat(field.modifiers || [])) ];
     }
   }
 };
diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index 3521271473..5014fd6f04 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -21,7 +21,7 @@
     // Some  browser styles set `textarea` to monospace.
     resize: none;
   }
-  
+
   &::placeholder {
     color: var(--a-base-4);
     font-style: italic;
@@ -106,7 +106,7 @@
 
 .apos-field.apos-field--micro {
   .apos-input {
-    padding: 10px;
+    padding: 7px;
     font-size: var(--a-type-small);
   }
 
@@ -115,6 +115,7 @@
   }
 
   .apos-field__label {
+    margin-bottom: 7px;
     font-size: var(--a-type-small);
     font-weight: 500;
   }