diff --git a/src/lib/components/chat/MessageInput/InputVariablesModal.svelte b/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
index 2a6bf6e8fa..5b14add6e3 100644
--- a/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
+++ b/src/lib/components/chat/MessageInput/InputVariablesModal.svelte
@@ -77,6 +77,8 @@
 						{#if !loading}
 							<div class="flex flex-col gap-1">
 								{#each Object.keys(variables) as variable, idx}
+									{@const { type, ...variableAttributes } = variables[variable] ?? {}}
+
 									<div class=" py-0.5 w-full justify-between">
 										<div class="flex w-full justify-between mb-1.5">
 											<div class=" self-center text-xs font-medium">
@@ -91,12 +93,20 @@
 										<div class="flex mt-0.5 mb-0.5 space-x-2">
 											<div class=" flex-1">
 												{#if variables[variable]?.type === 'select'}
+													{@const options = variableAttributes?.options ?? []}
+													{@const placeholder = variableAttributes?.placeholder ?? ''}
+
 													<select
 														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
 														bind:value={variableValues[variable]}
 														id="input-variable-{idx}"
 													>
-														{#each variables[variable]?.options ?? [] as option}
+														{#if placeholder}
+															<option value="" disabled selected>
+																{placeholder}
+															</option>
+														{/if}
+														{#each options as option}
 															<option value={option} selected={option === variableValues[variable]}>
 																{option}
 															</option>
@@ -110,6 +120,7 @@
 																bind:checked={variableValues[variable]}
 																class="size-3.5 rounded cursor-pointer border border-gray-200 dark:border-gray-700"
 																id="input-variable-{idx}"
+																{...variableAttributes}
 															/>
 
 															<label for="input-variable-{idx}" class="text-sm"
@@ -138,6 +149,7 @@
 																	// Convert the color value to uppercase immediately
 																	variableValues[variable] = e.target.value.toUpperCase();
 																}}
+																{...variableAttributes}
 															/>
 														</div>
 
@@ -159,6 +171,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'datetime-local'}
 													<input
@@ -169,6 +182,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'email'}
 													<input
@@ -179,6 +193,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'month'}
 													<input
@@ -189,6 +204,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'number'}
 													<input
@@ -199,9 +215,31 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'range'}
-													<input
+													<div class="flex items-center space-x-2">
+														<div class="relative flex justify-center items-center gap-2 flex-1">
+															<input
+																type="range"
+																bind:value={variableValues[variable]}
+																class="w-full rounded-lg py-1 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
+																id="input-variable-{idx}"
+																{...variableAttributes}
+															/>
+														</div>
+
+														<input
+															type="text"
+															class=" py-1 text-sm dark:text-gray-300 bg-transparent outline-hidden text-right"
+															placeholder="Enter value"
+															bind:value={variableValues[variable]}
+															autocomplete="off"
+															required
+														/>
+													</div>
+
+													<!-- <input
 														type="range"
 														class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
 														placeholder={variables[variable]?.placeholder ?? ''}
@@ -209,7 +247,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
-													/>
+													/> -->
 												{:else if variables[variable]?.type === 'tel'}
 													<input
 														type="tel"
@@ -219,6 +257,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'text'}
 													<input
@@ -229,6 +268,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'time'}
 													<input
@@ -239,6 +279,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'url'}
 													<input
@@ -249,6 +290,7 @@
 														autocomplete="off"
 														id="input-variable-{idx}"
 														required
+														{...variableAttributes}
 													/>
 												{:else if variables[variable]?.type === 'map'}
 													<!-- EXPERIMENTAL INPUT TYPE, DO NOT USE IN PRODUCTION -->