Add a slider indicator for number widgets in vue mode. (#8122)

Sometimes it's difficult to gauge the valid range of values for a
widget. Litegraph includes a "slider" widget which displays the distance
from the min and max values as a colored bar. However, this
implementation is rather strongly disliked because it prevents entering
an exact number. Vue mode makes it simple to add just the indicator onto
our existing widget.

In addition to requiring both min and max be set, not every widget would
want this functionality. It's not useful information for seed, but also
has potential to cause confusion on widgets like CFG, that allow
inputting numbers up to 100 even though values beyond ~15 are rarely
desirable.

As a proposed heuristic, the ratio of "step" to distance between min and
max is currently used, but this could fairly easily be changed to an
opt-in only system.

<img width="617" height="487" alt="image"
src="https://github.com/user-attachments/assets/9c5f2119-0a03-4b56-bcf5-e4a0d0250784"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8122-Add-a-slider-indicator-for-number-widgets-in-vue-mode-2eb6d73d365081218fc8e86f37001958)
by [Unito](https://www.unito.io)

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -41,7 +41,8 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const formattedValue = computed(() => {
   const unformattedValue = dragValue.value ?? modelValue.value
-  if (!isFinite(unformattedValue)) return `${unformattedValue}`
+  if ((unformattedValue as unknown) === '' || !isFinite(unformattedValue))
+    return `${unformattedValue}`
 
   return n(unformattedValue, {
     useGrouping: useGrouping.value,
@@ -175,6 +176,20 @@ const buttonTooltip = computed(() => {
   }
   return null
 })
+
+const sliderWidth = computed(() => {
+  const { max, min, step } = filteredProps.value
+  if (
+    min === undefined ||
+    max === undefined ||
+    step === undefined ||
+    (max - min) / step >= 100
+  )
+    return 0
+  const value = dragValue.value ?? modelValue.value
+  const ratio = (value - min) / (max - min)
+  return (ratio * 100).toFixed(0)
+})
 </script>
 
 <template>
@@ -184,8 +199,12 @@ const buttonTooltip = computed(() => {
       v-tooltip="buttonTooltip"
       v-bind="filteredProps"
       :aria-label="widget.name"
-      :class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7')"
+      :class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7 relative')"
     >
+      <div
+        class="bg-primary-background/15 absolute left-0 bottom-0 h-full rounded-lg pointer-events-none"
+        :style="{ width: `${sliderWidth}%` }"
+      />
       <button
         v-if="!buttonsDisabled"
         data-testid="decrement"