diff --git a/public/index.html b/public/index.html
index 02bcc1f0f..dfc73fcf6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -222,9 +222,8 @@
                                                 <input type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
                                             </div>
                                             <div class="range-block-counter" data-randomization-disabled="true">
-                                                <div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="16" max="1024" step="1" data-for="amount_gen" id="amount_gen_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -238,9 +237,8 @@
                                             <input type="range" id="max_context" name="volume" min="512" max="4096" step="512">
                                         </div>
                                         <div class="range-block-counter" data-randomization-disabled="true">
-                                            <div contenteditable="true" data-for="max_context" id="max_context_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="512" max="4096" step="512" data-for="max_context" id="max_context_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -288,9 +286,8 @@
                                             <input type="range" id="temp" name="volume" min="0.0" max="2.0" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="temp" id="temp_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.0" max="2.0" step="0.01" data-for="temp" id="temp_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -303,9 +300,8 @@
                                             <input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="1.5" step="0.01" data-for="rep_pen" id="rep_pen_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -318,9 +314,8 @@
                                             <input type="range" id="rep_pen_range" name="volume" min="0" max="4096" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="4096" step="1" data-for="rep_pen_range" id="rep_pen_range_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -333,9 +328,8 @@
                                             <input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="10" step="0.1" data-for="rep_pen_slope" id="rep_pen_slope_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -363,9 +357,8 @@
                                             <input type="range" id="temp_novel" name="volume" min="0.1" max="2.50" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.1" max="2.50" step="0.01" data-for="temp_novel" id="temp_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -378,9 +371,8 @@
                                             <input type="range" id="rep_pen_novel" name="volume" min="1" max="8" step="0.05">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="8" step="0.05" data-for="rep_pen_novel" id="rep_pen_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -393,9 +385,8 @@
                                             <input type="range" id="rep_pen_size_novel" name="volume" min="0" max="8192" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="8192" step="1" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -408,9 +399,8 @@
                                             <input type="range" id="rep_pen_slope_novel" name="volume" min="0" max="10" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="10" step="0.01" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -423,9 +413,8 @@
                                             <input type="range" id="rep_pen_freq_novel" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -438,9 +427,8 @@
                                             <input type="range" id="rep_pen_presence_novel" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -453,9 +441,8 @@
                                             <input type="range" id="tail_free_sampling_novel" name="volume" min="0" max="1" step="0.001">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.001" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -496,9 +483,8 @@
                                             <input type="range" id="temp_textgenerationwebui" name="volume" min="0.0" max="2.0" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.0" max="2.0" step="0.01" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -511,9 +497,8 @@
                                             <input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="1.5" step="0.01" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -526,9 +511,8 @@
                                             <input type="range" id="rep_pen_range_textgenerationwebui" name="volume" min="0" max="4096" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="4096" step="1" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -541,9 +525,8 @@
                                             <input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.8" max="1.5" step="0.01" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -556,9 +539,8 @@
                                             <input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="20" step="1" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -571,9 +553,8 @@
                                             <input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="2000" step="1" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -602,9 +583,8 @@
                                             <input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
                                         </div>
                                         <div class="range-block-counter" data-randomization-disabled="true">
-                                            <div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="512" max="4095" step="1" data-for="openai_max_context" id="openai_max_context_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -643,8 +623,8 @@
                                             <input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">
-                                                select</div>
+                                            <input type="number" min="0" max="2.0" step="0.01" data-for="temp_openai" id="temp_counter_openai">
+
                                         </div>
                                     </div>
                                 </div>
@@ -657,9 +637,8 @@
                                             <input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
-                                                select
-                                            </div>
+                                            <input type="number" min="-2" max="2" step="0.01" data-for="freq_pen_openai" id="freq_pen_counter_openai">
+
                                         </div>
                                     </div>
                                 </div>
@@ -672,9 +651,8 @@
                                             <input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
-                                                select
-                                            </div>
+                                            <input type="number" min="-2" max="2" step="0.01" data-for="pres_pen_openai" id="pres_pen_counter_openai">
+
                                         </div>
                                     </div>
                                 </div>
@@ -687,9 +665,8 @@
                                             <input type="range" id="count_pen" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="count_pen" id="count_pen_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="count_pen" id="count_pen_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -702,9 +679,8 @@
                                             <input type="range" id="top_k_openai" name="volume" min="0" max="200" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_k_openai" id="top_k_counter_openai">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="200" step="1" data-for="top_k_openai" id="top_k_counter_openai">
+
                                         </div>
                                     </div>
                                 </div>
@@ -717,9 +693,8 @@
                                             <input type="range" id="top_p_openai" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_p_openai" id="top_p_counter_openai">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="top_p_openai" id="top_p_counter_openai">
+
                                         </div>
                                     </div>
                                 </div>
@@ -935,9 +910,8 @@
                                                 <input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="top_p" id="top_p_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="1" step="0.01" data-for="top_p" id="top_p_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -950,9 +924,8 @@
                                                 <input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="top_a" id="top_a_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="1" step="0.01" data-for="top_a" id="top_a_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -965,9 +938,8 @@
                                                 <input type="range" id="top_k" name="volume" min="0" max="100" step="1">
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="top_k" id="top_k_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="100" step="1" data-for="top_k" id="top_k_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -980,9 +952,8 @@
                                                 <input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="typical" id="typical_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="1" step="0.01" data-for="typical" id="typical_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -995,9 +966,8 @@
                                                 <input type="range" id="tfs" name="volume" min="0" max="1" step="0.01">
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="tfs" id="tfs_counter">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="1" step="0.01" data-for="tfs" id="tfs_counter">
+
                                             </div>
                                         </div>
                                     </div>
@@ -1042,9 +1012,8 @@
                                                 <input type="range" id="mirostat_mode_kobold" name="volume" min="0" max="2" step="1" />
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="mirostat_mode_kobold" id="mirostat_mode_counter_kobold">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="2" step="1" data-for="mirostat_mode_kobold" id="mirostat_mode_counter_kobold">
+
                                             </div>
                                         </div>
                                     </div>
@@ -1060,9 +1029,8 @@
                                                 <input type="range" id="mirostat_tau_kobold" name="volume" min="0" max="20" step="0.01" />
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="mirostat_tau_kobold" id="mirostat_tau_counter_kobold">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_kobold" id="mirostat_tau_counter_kobold">
+
                                             </div>
                                         </div>
                                     </div>
@@ -1078,9 +1046,8 @@
                                                 <input type="range" id="mirostat_eta_kobold" name="volume" min="0" max="1" step="0.01" />
                                             </div>
                                             <div class="range-block-counter">
-                                                <div contenteditable="true" data-for="mirostat_eta_kobold" id="mirostat_eta_counter_kobold">
-                                                    select
-                                                </div>
+                                                <input type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_kobold" id="mirostat_eta_counter_kobold">
+
                                             </div>
                                         </div>
                                     </div>
@@ -1192,9 +1159,8 @@
                                             <input type="range" id="cfg_scale_novel" name="volume" min="1" max="3" step="0.05">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="cfg_scale_novel" id="cfg_scale_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="3" step="0.05" data-for="cfg_scale_novel" id="cfg_scale_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1219,9 +1185,8 @@
                                             <input type="range" id="top_p_novel" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_p_novel" id="top_p_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="top_p_novel" id="top_p_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1234,9 +1199,8 @@
                                             <input type="range" id="top_a_novel" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_a_novel" id="top_a_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="top_a_novel" id="top_a_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1249,9 +1213,8 @@
                                             <input type="range" id="top_k_novel" name="volume" min="0" max="300" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_k_novel" id="top_k_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="300" step="1" data-for="top_k_novel" id="top_k_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1264,9 +1227,8 @@
                                             <input type="range" id="mirostat_tau_novel" name="volume" min="0" max="6" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="mirostat_tau_novel" id="mirostat_tau_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="6" step="0.01" data-for="mirostat_tau_novel" id="mirostat_tau_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1279,9 +1241,8 @@
                                             <input type="range" id="mirostat_lr_novel" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="mirostat_lr_novel" id="mirostat_lr_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="mirostat_lr_novel" id="mirostat_lr_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1294,9 +1255,8 @@
                                             <input type="range" id="typical_p_novel" name="volume" min="0" max="1" step="0.001">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="typical_p_novel" id="typical_p_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.001" data-for="typical_p_novel" id="typical_p_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1309,9 +1269,8 @@
                                             <input type="range" id="min_length_novel" name="volume" min="1" max="150" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="min_length_novel" id="min_length_counter_novel">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="150" step="1" data-for="min_length_novel" id="min_length_counter_novel">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1377,9 +1336,8 @@
                                             <input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="200" step="1" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1392,9 +1350,8 @@
                                             <input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1407,9 +1364,8 @@
                                             <input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1422,9 +1378,8 @@
                                             <input type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1437,9 +1392,8 @@
                                             <input type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1452,9 +1406,8 @@
                                             <input type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="9" step="0.01" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1467,9 +1420,8 @@
                                             <input type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="20" step="0.01" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1535,9 +1487,8 @@
                                             <input type="range" id="guidance_scale_textgenerationwebui" name="volume" min="0.1" max="4" step="0.05">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="guidance_scale_textgenerationwebui" id="guidance_scale_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.1" max="4" step="0.05" data-for="guidance_scale_textgenerationwebui" id="guidance_scale_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1563,9 +1514,8 @@
                                             <input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="1" max="20" step="1" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1578,9 +1528,8 @@
                                             <input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="-5" max="5" step="0.1" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1601,9 +1550,8 @@
                                             <input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="5" step="0.05" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1618,9 +1566,8 @@
                                             <input type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="2" step="1" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1633,9 +1580,8 @@
                                             <input type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="20" step="0.01" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="20" step="0.01" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -1648,9 +1594,8 @@
                                             <input type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="1" step="0.01" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2680,9 +2625,8 @@
                                             <input type="range" id="world_info_depth" name="volume" min="0" max="100" step="1">
                                         </div>
                                         <div class="range-block-counter margin0">
-                                            <div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter">
-                                                depth
-                                            </div>
+                                            <input type="number" data-for="world_info_depth" id="world_info_depth_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2696,9 +2640,8 @@
                                             <input type="range" id="world_info_budget" name="volume" min="1" max="100" step="1">
                                         </div>
                                         <div class="range-block-counter margin0">
-                                            <div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
-                                                budget
-                                            </div>
+                                            <input type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2712,9 +2655,8 @@
                                             <input type="range" id="world_info_budget_cap" name="volume" min="0" max="8192" step="1">
                                         </div>
                                         <div class="range-block-counter margin0">
-                                            <div contenteditable="true" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
-                                                0
-                                            </div>
+                                            <input type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
+
                                         </div>
                                     </div>
                                     <div class="budget_cap_note">
@@ -2914,9 +2856,8 @@
                                             <input id="chat_width_slider" class="wide100p" type="range" min="25" max="100" step="1" value="50">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="chat_width_slider" id="chat_width_slider_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="25" max="100" step="1" value="50" data-for="chat_width_slider" id="chat_width_slider_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2929,9 +2870,8 @@
                                             <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.01">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="font_scale" id="font_scale_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0.8" max="1.2" step="0.01" data-for="font_scale" id="font_scale_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2944,9 +2884,8 @@
                                             <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="30" step="1" data-for="blur_strength" id="blur_strength_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -2959,9 +2898,8 @@
                                             <input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                         </div>
                                         <div class="range-block-counter">
-                                            <div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
-                                                select
-                                            </div>
+                                            <input type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
+
                                         </div>
                                     </div>
                                 </div>
@@ -4797,9 +4735,8 @@
                                     <input type="range" id="chat_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                 </div>
                                 <div class="range-block-counter">
-                                    <div contenteditable="true" data-for="chat_cfg_guidance_scale" id="chat_cfg_guidance_scale_counter">
-                                        select
-                                    </div>
+                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="chat_cfg_guidance_scale" id="chat_cfg_guidance_scale_counter">
+
                                 </div>
                             </div>
                             <div>
@@ -4841,9 +4778,8 @@
                                     <input type="range" id="chara_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                 </div>
                                 <div class="range-block-counter">
-                                    <div contenteditable="true" data-for="chara_cfg_guidance_scale" id="chara_cfg_guidance_scale_counter">
-                                        select
-                                    </div>
+                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="chara_cfg_guidance_scale" id="chara_cfg_guidance_scale_counter">
+
                                 </div>
                             </div>
                             <div>
@@ -4879,9 +4815,8 @@
                                     <input type="range" id="global_cfg_guidance_scale" name="volume" min="0.10" max="4.00" step="0.05">
                                 </div>
                                 <div class="range-block-counter">
-                                    <div contenteditable="true" data-for="global_cfg_guidance_scale" id="global_cfg_guidance_scale_counter">
-                                        select
-                                    </div>
+                                    <input type="number" min="0.10" max="4.00" step="0.05" data-for="global_cfg_guidance_scale" id="global_cfg_guidance_scale_counter">
+
                                 </div>
                             </div>
                             <div>
@@ -5104,4 +5039,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index 6e451527c..b627bce01 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5025,10 +5025,10 @@ async function getSettings(type) {
 
         // Set context size after loading power user (may override the max value)
         $("#max_context").val(max_context);
-        $("#max_context_counter").text(`${max_context}`);
+        $("#max_context_counter").val(max_context);
 
         $("#amount_gen").val(amount_gen);
-        $("#amount_gen_counter").text(`${amount_gen}`);
+        $("#amount_gen_counter").val(amount_gen);
 
         //Load which API we are using
         if (settings.main_api == undefined) {
@@ -5162,7 +5162,7 @@ export function setGenerationParamsFromPreset(preset) {
     if (preset.genamt !== undefined) {
         amount_gen = preset.genamt;
         $("#amount_gen").val(amount_gen);
-        $("#amount_gen_counter").text(`${amount_gen}`);
+        $("#amount_gen_counter").val(amount_gen);
     }
 
     if (preset.max_length !== undefined) {
@@ -5171,7 +5171,7 @@ export function setGenerationParamsFromPreset(preset) {
         max_context = preset.max_length;
 
         $("#max_context").val(max_context);
-        $("#max_context_counter").text(`${max_context}`);
+        $("#max_context_counter").val(max_context);
     }
 }
 
@@ -7922,7 +7922,7 @@ jQuery(async function () {
             const value = $(this).val();
             const formattedValue = slider.format(value);
             slider.setValue(value);
-            $(slider.counterId).text(formattedValue);
+            $(slider.counterId).val(formattedValue);
             saveSettingsDebounced();
         });
     });
@@ -8723,46 +8723,67 @@ jQuery(async function () {
         }
     });
 
-    $(document).on('input', '.range-block-counter div[contenteditable="true"]', function () {
-        const caretPosition = saveCaretPosition($(this).get(0));
-        const myText = $(this).text().trim();
-        $(this).text(myText); // trim line breaks and spaces
-        const masterSelector = $(this).data('for');
-        const masterElement = document.getElementById(masterSelector);
+    $(document).on('input', '.range-block-counter input', function () {
+        setTimeout(() => {
+            const caretPosition = saveCaretPosition($(this).get(0));
+            const myText = $(this).val().trim();
+            $(this).val(myText); // trim line breaks and spaces
+            const masterSelector = $(this).data('for');
+            const masterElement = document.getElementById(masterSelector);
 
-        if (masterElement == null) {
-            console.error('Master input element not found for the editable label', masterSelector);
-            return;
-        }
+            if (masterElement == null) {
+                console.error('Master input element not found for the editable label', masterSelector);
+                return;
+            }
 
-        const myValue = Number(myText);
+            const myValue = Number(myText);
+            const masterStep = Number(masterElement.getAttribute('step'))
+            const masterMin = Number($(masterElement).attr('min'));
+            const masterMax = Number($(masterElement).attr('max'));
+            const rawStepCompare = myValue / masterStep
+            const closestStep = Math.round(rawStepCompare)
+            const closestStepRaw = (closestStep) * masterStep
+
+            //if text box val is not a number, reset slider val to its previous and wait for better input
+            if (Number.isNaN(myValue)) {
+                console.warn('Label input is not a valid number. Resetting the value to match slider', myText);
+                $(masterElement).trigger('input');
+                restoreCaretPosition($(this).get(0), caretPosition);
+                return;
+            }
+
+            //if textbox val is less than min, set slider to min
+            //PROBLEM: the moment slider gets set to min, textbox also auto-sets to min.
+            //if min = 0, this prevents further typing and locks input at 0 unless users pastes
+            //a multi-character number which is between min and max. adding delay was necessary.
+            if (myValue < masterMin) {
+                console.warn('Label input is less than minimum.', myText, '<', masterMin);
+                $(masterElement).val(masterMin).trigger('input').trigger('mouseup');
+                $(masterElement).val(myValue)
+                restoreCaretPosition($(this).get(0), caretPosition);
+                return;
+            }
+            //Same as above but in reverse. Not a problem because max value has multiple
+            //characters which can be edited.
+            if (myValue > masterMax) {
+                console.warn('Label input is more than maximum.', myText, '>', masterMax);
+                $(masterElement).val(masterMax).trigger('input').trigger('mouseup');
+                $(masterElement).val(myValue)
+                restoreCaretPosition($(this).get(0), caretPosition);
+                return;
+            }
+
+            //round input value to nearest step if between min and max
+            if (!(myValue < masterMin) && !(myValue > masterMax)) {
+                console.debug(`Label value ${myText} is OK, setting slider to closest step (${closestStepRaw})`);
+                $(masterElement).val(closestStepRaw).trigger('input').trigger('mouseup');
+                restoreCaretPosition($(this).get(0), caretPosition);
+                return;
+            }
 
-        if (Number.isNaN(myValue)) {
-            console.warn('Label input is not a valid number. Resetting the value', myText);
-            $(masterElement).trigger('input');
             restoreCaretPosition($(this).get(0), caretPosition);
-            return;
-        }
-
-        const masterMin = Number($(masterElement).attr('min'));
-        const masterMax = Number($(masterElement).attr('max'));
-
-        if (myValue < masterMin) {
-            console.warn('Label input is less than minimum.', myText, '<', masterMin);
-            restoreCaretPosition($(this).get(0), caretPosition);
-            return;
-        }
-
-        if (myValue > masterMax) {
-            console.warn('Label input is more than maximum.', myText, '>', masterMax);
-            restoreCaretPosition($(this).get(0), caretPosition);
-            return;
-        }
-
-        console.debug('Label value OK, setting to the master input control', myText);
-        $(masterElement).val(myValue).trigger('input').trigger('mouseup');
-        restoreCaretPosition($(this).get(0), caretPosition);
-    });
+        }, 500);
+    })
 
     $(".user_stats_button").on('click', function () {
         userStatsHandler();
diff --git a/public/scripts/kai-settings.js b/public/scripts/kai-settings.js
index 26abf0c77..517e32b2f 100644
--- a/public/scripts/kai-settings.js
+++ b/public/scripts/kai-settings.js
@@ -72,7 +72,7 @@ export function loadKoboldSettings(preset) {
         const formattedValue = slider.format(value);
         slider.setValue(value);
         $(slider.sliderId).val(value);
-        $(slider.counterId).text(formattedValue);
+        $(slider.counterId).val(formattedValue);
     }
 
     // TODO: refactor checkboxes (if adding any more)
@@ -375,7 +375,7 @@ jQuery(function () {
             const value = $(this).val();
             const formattedValue = slider.format(value);
             slider.setValue(value);
-            $(slider.counterId).text(formattedValue);
+            $(slider.counterId).val(formattedValue);
             saveSettingsDebounced();
         });
     });
diff --git a/public/scripts/nai-settings.js b/public/scripts/nai-settings.js
index c5575922a..5fee49b92 100644
--- a/public/scripts/nai-settings.js
+++ b/public/scripts/nai-settings.js
@@ -176,36 +176,36 @@ export function loadNovelSettings(settings) {
 
 function loadNovelSettingsUi(ui_settings) {
     $("#temp_novel").val(ui_settings.temperature);
-    $("#temp_counter_novel").text(Number(ui_settings.temperature).toFixed(2));
+    $("#temp_counter_novel").val(Number(ui_settings.temperature).toFixed(2));
     $("#rep_pen_novel").val(ui_settings.repetition_penalty);
-    $("#rep_pen_counter_novel").text(Number(ui_settings.repetition_penalty).toFixed(2));
+    $("#rep_pen_counter_novel").val(Number(ui_settings.repetition_penalty).toFixed(2));
     $("#rep_pen_size_novel").val(ui_settings.repetition_penalty_range);
-    $("#rep_pen_size_counter_novel").text(Number(ui_settings.repetition_penalty_range).toFixed(0));
+    $("#rep_pen_size_counter_novel").val(Number(ui_settings.repetition_penalty_range).toFixed(0));
     $("#rep_pen_slope_novel").val(ui_settings.repetition_penalty_slope);
-    $("#rep_pen_slope_counter_novel").text(Number(`${ui_settings.repetition_penalty_slope}`).toFixed(2));
+    $("#rep_pen_slope_counter_novel").val(Number(`${ui_settings.repetition_penalty_slope}`).toFixed(2));
     $("#rep_pen_freq_novel").val(ui_settings.repetition_penalty_frequency);
-    $("#rep_pen_freq_counter_novel").text(Number(ui_settings.repetition_penalty_frequency).toFixed(5));
+    $("#rep_pen_freq_counter_novel").val(Number(ui_settings.repetition_penalty_frequency).toFixed(5));
     $("#rep_pen_presence_novel").val(ui_settings.repetition_penalty_presence);
-    $("#rep_pen_presence_counter_novel").text(Number(ui_settings.repetition_penalty_presence).toFixed(3));
+    $("#rep_pen_presence_counter_novel").val(Number(ui_settings.repetition_penalty_presence).toFixed(3));
     $("#tail_free_sampling_novel").val(ui_settings.tail_free_sampling);
-    $("#tail_free_sampling_counter_novel").text(Number(ui_settings.tail_free_sampling).toFixed(3));
+    $("#tail_free_sampling_counter_novel").val(Number(ui_settings.tail_free_sampling).toFixed(3));
     $("#top_k_novel").val(ui_settings.top_k);
-    $("#top_k_counter_novel").text(Number(ui_settings.top_k).toFixed(0));
+    $("#top_k_counter_novel").val(Number(ui_settings.top_k).toFixed(0));
     $("#top_p_novel").val(ui_settings.top_p);
-    $("#top_p_counter_novel").text(Number(ui_settings.top_p).toFixed(2));
+    $("#top_p_counter_novel").val(Number(ui_settings.top_p).toFixed(2));
     $("#top_a_novel").val(ui_settings.top_a);
-    $("#top_a_counter_novel").text(Number(ui_settings.top_a).toFixed(2));
+    $("#top_a_counter_novel").val(Number(ui_settings.top_a).toFixed(2));
     $("#typical_p_novel").val(ui_settings.typical_p);
-    $("#typical_p_counter_novel").text(Number(ui_settings.typical_p).toFixed(3));
+    $("#typical_p_counter_novel").val(Number(ui_settings.typical_p).toFixed(3));
     $("#cfg_scale_novel").val(ui_settings.cfg_scale);
-    $("#cfg_scale_counter_novel").text(Number(ui_settings.cfg_scale).toFixed(2));
+    $("#cfg_scale_counter_novel").val(Number(ui_settings.cfg_scale).toFixed(2));
     $("#phrase_rep_pen_novel").val(ui_settings.phrase_rep_pen || "off");
     $("#mirostat_lr_novel").val(ui_settings.mirostat_lr);
-    $("#mirostat_lr_counter_novel").text(Number(ui_settings.mirostat_lr).toFixed(2));
+    $("#mirostat_lr_counter_novel").val(Number(ui_settings.mirostat_lr).toFixed(2));
     $("#mirostat_tau_novel").val(ui_settings.mirostat_tau);
-    $("#mirostat_tau_counter_novel").text(Number(ui_settings.mirostat_tau).toFixed(2));
+    $("#mirostat_tau_counter_novel").val(Number(ui_settings.mirostat_tau).toFixed(2));
     $("#min_length_novel").val(ui_settings.min_length);
-    $("#min_length_counter_novel").text(Number(ui_settings.min_length).toFixed(0));
+    $("#min_length_counter_novel").val(Number(ui_settings.min_length).toFixed(0));
     $('#nai_preamble_textarea').val(ui_settings.preamble);
     $('#nai_prefix').val(ui_settings.prefix || "vanilla");
     $('#nai_cfg_uc').val(ui_settings.cfg_uc || "");
@@ -244,7 +244,7 @@ const sliders = [
     {
         sliderId: "#rep_pen_freq_novel",
         counterId: "#rep_pen_freq_counter_novel",
-        format: (val) => `${val}`,
+        format: (val) => Number(val).toFixed(5),
         setValue: (val) => { nai_settings.repetition_penalty_frequency = Number(val).toFixed(5); },
     },
     {
@@ -740,7 +740,7 @@ jQuery(function () {
             const value = $(this).val();
             const formattedValue = slider.format(value);
             slider.setValue(value);
-            $(slider.counterId).text(formattedValue);
+            $(slider.counterId).val(formattedValue);
             saveSettingsDebounced();
         });
     });
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index ef55d0672..eb53ee38a 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -2070,7 +2070,7 @@ function loadOpenAISettings(data, settings) {
     $('#model_ai21_select').val(oai_settings.ai21_model);
     $(`#model_ai21_select option[value="${oai_settings.ai21_model}"`).attr('selected', true);
     $('#openai_max_context').val(oai_settings.openai_max_context);
-    $('#openai_max_context_counter').text(`${oai_settings.openai_max_context}`);
+    $('#openai_max_context_counter').val(`${oai_settings.openai_max_context}`);
     $('#model_openrouter_select').val(oai_settings.openrouter_model);
 
     $('#openai_max_tokens').val(oai_settings.openai_max_tokens);
@@ -2099,22 +2099,22 @@ function loadOpenAISettings(data, settings) {
     $('#send_if_empty_textarea').val(oai_settings.send_if_empty);
 
     $('#temp_openai').val(oai_settings.temp_openai);
-    $('#temp_counter_openai').text(Number(oai_settings.temp_openai).toFixed(2));
+    $('#temp_counter_openai').val(Number(oai_settings.temp_openai).toFixed(2));
 
     $('#freq_pen_openai').val(oai_settings.freq_pen_openai);
-    $('#freq_pen_counter_openai').text(Number(oai_settings.freq_pen_openai).toFixed(2));
+    $('#freq_pen_counter_openai').val(Number(oai_settings.freq_pen_openai).toFixed(2));
 
     $('#pres_pen_openai').val(oai_settings.pres_pen_openai);
-    $('#pres_pen_counter_openai').text(Number(oai_settings.pres_pen_openai).toFixed(2));
+    $('#pres_pen_counter_openai').val(Number(oai_settings.pres_pen_openai).toFixed(2));
 
     $('#count_pen').val(oai_settings.count_pen);
-    $('#count_pen_counter').text(Number(oai_settings.count_pen).toFixed(2));
+    $('#count_pen_counter').val(Number(oai_settings.count_pen).toFixed(2));
 
     $('#top_p_openai').val(oai_settings.top_p_openai);
-    $('#top_p_counter_openai').text(Number(oai_settings.top_p_openai).toFixed(2));
+    $('#top_p_counter_openai').val(Number(oai_settings.top_p_openai).toFixed(2));
 
     $('#top_k_openai').val(oai_settings.top_k_openai);
-    $('#top_k_counter_openai').text(Number(oai_settings.top_k_openai).toFixed(0));
+    $('#top_k_counter_openai').val(Number(oai_settings.top_k_openai).toFixed(0));
 
     if (settings.reverse_proxy !== undefined) oai_settings.reverse_proxy = settings.reverse_proxy;
     $('#openai_reverse_proxy').val(oai_settings.reverse_proxy);
@@ -3119,43 +3119,43 @@ $(document).ready(async function () {
 
     $(document).on('input', '#temp_openai', function () {
         oai_settings.temp_openai = Number($(this).val());
-        $('#temp_counter_openai').text(Number($(this).val()).toFixed(2));
+        $('#temp_counter_openai').val(Number($(this).val()).toFixed(2));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#freq_pen_openai', function () {
         oai_settings.freq_pen_openai = Number($(this).val());
-        $('#freq_pen_counter_openai').text(Number($(this).val()).toFixed(2));
+        $('#freq_pen_counter_openai').val(Number($(this).val()).toFixed(2));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#pres_pen_openai', function () {
         oai_settings.pres_pen_openai = Number($(this).val());
-        $('#pres_pen_counter_openai').text(Number($(this).val()).toFixed(2));
+        $('#pres_pen_counter_openai').val(Number($(this).val()).toFixed(2));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#count_pen', function () {
         oai_settings.count_pen = Number($(this).val());
-        $('#count_pen_counter').text(Number($(this).val()).toFixed(2));
+        $('#count_pen_counter').val(Number($(this).val()).toFixed(2));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#top_p_openai', function () {
         oai_settings.top_p_openai = Number($(this).val());
-        $('#top_p_counter_openai').text(Number($(this).val()).toFixed(2));
+        $('#top_p_counter_openai').val(Number($(this).val()).toFixed(2));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#top_k_openai', function () {
         oai_settings.top_k_openai = Number($(this).val());
-        $('#top_k_counter_openai').text(Number($(this).val()).toFixed(0));
+        $('#top_k_counter_openai').val(Number($(this).val()).toFixed(0));
         saveSettingsDebounced();
     });
 
     $(document).on('input', '#openai_max_context', function () {
         oai_settings.openai_max_context = Number($(this).val());
-        $('#openai_max_context_counter').text(`${$(this).val()}`);
+        $('#openai_max_context_counter').val(`${$(this).val()}`);
         calculateOpenRouterCost();
         saveSettingsDebounced();
     });
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 4a8fb35a6..63a552c23 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -44,8 +44,10 @@ export {
     getContextSettings,
 };
 
-export const MAX_CONTEXT_DEFAULT = 4096;
+export const MAX_CONTEXT_DEFAULT = 8192;
 const MAX_CONTEXT_UNLOCKED = 65536;
+const unlockedMaxContextStep = 4096
+const unlockedMaxContestMin = 8192
 
 const defaultStoryString = "{{#if system}}{{system}}\n{{/if}}{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}\n{{/if}}{{#if persona}}{{persona}}\n{{/if}}";
 const defaultExampleSeparator = '***';
@@ -551,7 +553,7 @@ function applyChatWidth(type) {
         })
     }
 
-    $('#chat_width_slider_counter').text(power_user.chat_width);
+    $('#chat_width_slider_counter').val(power_user.chat_width);
 }
 
 async function applyThemeColor(type) {
@@ -612,7 +614,7 @@ async function applyCustomCSS() {
 async function applyBlurStrength() {
     power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1);
     document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength);
-    $("#blur_strength_counter").text(power_user.blur_strength);
+    $("#blur_strength_counter").val(power_user.blur_strength);
     $("#blur_strength").val(power_user.blur_strength);
 
 
@@ -621,7 +623,7 @@ async function applyBlurStrength() {
 async function applyShadowWidth() {
     power_user.shadow_width = Number(localStorage.getItem(storage_keys.shadow_width) ?? 2);
     document.documentElement.style.setProperty('--shadowWidth', power_user.shadow_width);
-    $("#shadow_width_counter").text(power_user.shadow_width);
+    $("#shadow_width_counter").val(power_user.shadow_width);
     $("#shadow_width").val(power_user.shadow_width);
 
 }
@@ -639,7 +641,7 @@ async function applyFontScale(type) {
         })
     }
 
-    $("#font_scale_counter").text(power_user.font_scale);
+    $("#font_scale_counter").val(power_user.font_scale);
     $("#font_scale").val(power_user.font_scale);
 }
 
@@ -985,13 +987,13 @@ function loadPowerUserSettings(settings, data) {
     $("#token_padding").val(power_user.token_padding);
 
     $("#font_scale").val(power_user.font_scale);
-    $("#font_scale_counter").text(power_user.font_scale);
+    $("#font_scale_counter").val(power_user.font_scale);
 
     $("#blur_strength").val(power_user.blur_strength);
-    $("#blur_strength_counter").text(power_user.blur_strength);
+    $("#blur_strength_counter").val(power_user.blur_strength);
 
     $("#shadow_width").val(power_user.shadow_width);
-    $("#shadow_width_counter").text(power_user.shadow_width);
+    $("#shadow_width_counter").val(power_user.shadow_width);
 
     $("#main-text-color-picker").attr('color', power_user.main_text_color);
     $("#italics-color-picker").attr('color', power_user.italics_text_color);
@@ -1085,9 +1087,13 @@ function loadMaxContextUnlocked() {
 function switchMaxContextSize() {
     const elements = [$('#max_context'), $('#rep_pen_range'), $('#rep_pen_range_textgenerationwebui')];
     const maxValue = power_user.max_context_unlocked ? MAX_CONTEXT_UNLOCKED : MAX_CONTEXT_DEFAULT;
+    const minValue = power_user.max_context_unlocked ? unlockedMaxContestMin : 0;
+    const steps = power_user.max_context_unlocked ? unlockedMaxContextStep : 256;
 
     for (const element of elements) {
         element.attr('max', maxValue);
+        element.attr('step', steps);
+        element.attr('min', minValue);
         const value = Number(element.val());
 
         if (value >= maxValue) {
@@ -2052,7 +2058,7 @@ $(document).ready(() => {
 
     $(`input[name="font_scale"]`).on('input', async function (e) {
         power_user.font_scale = Number(e.target.value);
-        $("#font_scale_counter").text(power_user.font_scale);
+        $("#font_scale_counter").val(power_user.font_scale);
         localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
         await applyFontScale();
         saveSettingsDebounced();
@@ -2060,7 +2066,7 @@ $(document).ready(() => {
 
     $(`input[name="blur_strength"]`).on('input', async function (e) {
         power_user.blur_strength = Number(e.target.value);
-        $("#blur_strength_counter").text(power_user.blur_strength);
+        $("#blur_strength_counter").val(power_user.blur_strength);
         localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
         await applyBlurStrength();
         saveSettingsDebounced();
@@ -2068,7 +2074,7 @@ $(document).ready(() => {
 
     $(`input[name="shadow_width"]`).on('input', async function (e) {
         power_user.shadow_width = Number(e.target.value);
-        $("#shadow_width_counter").text(power_user.shadow_width);
+        $("#shadow_width_counter").val(power_user.shadow_width);
         localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
         await applyShadowWidth();
         saveSettingsDebounced();
diff --git a/public/scripts/textgen-settings.js b/public/scripts/textgen-settings.js
index 4dcfe091c..571e99e6b 100644
--- a/public/scripts/textgen-settings.js
+++ b/public/scripts/textgen-settings.js
@@ -286,7 +286,8 @@ jQuery(function () {
             }
             else {
                 const value = Number($(this).val());
-                $(`#${id}_counter_textgenerationwebui`).text(value.toFixed(2));
+                $(`#${id}_counter_textgenerationwebui`).val(value.toFixed(2));
+                $("#rep_pen_range_counter_textgenerationwebui").val(Math.floor(value));
                 textgenerationwebui_settings[id] = value;
             }
 
@@ -312,7 +313,8 @@ function setSettingByName(i, value, trigger) {
     else {
         const val = parseFloat(value);
         $(`#${i}_textgenerationwebui`).val(val);
-        $(`#${i}_counter_textgenerationwebui`).text(val.toFixed(2));
+        $(`#${i}_counter_textgenerationwebui`).val(val.toFixed(2));
+        $("#rep_pen_range_counter_textgenerationwebui").val(Math.floor(val));
     }
 
     if (trigger) {
diff --git a/public/style.css b/public/style.css
index 7afcc433a..11b4eeca6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2269,7 +2269,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     text-align: center;
 }
 
-.range-block-counter div[contenteditable="true"] {
+.range-block-counter input {
     display: block;
     cursor: text;
     background-color: var(--black30a);
@@ -2278,6 +2278,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     padding: 2px;
     flex: 1;
     text-align: center;
+    width: 70px;
 }
 
 .range-block-range {
@@ -3664,4 +3665,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
+}
\ No newline at end of file