amam/min_max_error_msg

src/main.css

@@ -605,4 +605,9 @@ label.checkbox input:checked ~ span.check {
 .ui-dialog-titlebar {
     display: flex;
     align-items: center;
-}
+}
+
+.error-field {
+    border-color: #c03!important;
+    color: #c03;
+} 

src/trade/tradeDialog.es6

@@ -628,6 +628,8 @@ function init_state(available,root, dialog, symbol, contracts_for_spot){
     if (!range) return;
     state.duration_count.min = range.min;
     state.duration_count.max = range.max;
+    $('#minimum_hint').html(range.min)
+    $('#maximum_hint').html(range.max)
     if(try_to_keep_value !== true) {
       state.duration_count.value = range.min;
     }
@@ -800,6 +802,25 @@ function init_state(available,root, dialog, symbol, contracts_for_spot){
       });
     }
 
+    var $duration_input = $('#duration-input')
+    var $duration_hint_minimum = $('#duration-hint-minimum')
+    var $duration_hint_maximum = $('#duration-hint-maximum')
+    if($duration_input.val() < state.duration_count.min){
+      $duration_input.addClass('error-field')
+      $duration_hint_maximum.addClass('invisible')
+      $duration_hint_minimum.removeClass('invisible')
+    }
+    else if($duration_input.val() > state.duration_count.max){
+      $duration_input.addClass('error-field')
+      $duration_hint_minimum.addClass('invisible')
+      $duration_hint_maximum.removeClass('invisible')
+      }
+    else{
+      $duration_hint_maximum.addClass('invisible')
+      $duration_hint_minimum.addClass('invisible')
+      $duration_input.removeClass('error-field')
+    }
+
     async function subscribeProposalHandler(request, times_to_retry, required_err_code_for_retry) {
       let response;
       for (let i = 0; i < times_to_retry; i++) {

src/trade/tradeDialog.html

@@ -106,6 +106,15 @@
         </li>
     </ul>
 
+    <ul class="duration-hint error-field invisible" id="duration-hint-minimum">
+        <li>Minimum:</li>
+        <li id="minimum_hint"></li>
+    </ul>
+    <ul class="duration-hint error-field invisible" id="duration-hint-maximum">
+        <li>Maximum:</li>
+        <li id="maximum_hint"></li>
+    </ul>
+
     <ul class="barriers-barrier-row"
         rv-css-padding-top="categories.paddingTop < value"
         rv-show="barriers.barrier_count | eq 1">

src/trade/tradeDialog.scss

@@ -47,7 +47,9 @@
   .error { background: #fef1cf; }
   ul.categories-row li select.contract-category-display + .ui-selectmenu-button { max-width: 145px; }
   .ui-selectmenu-text { margin-top: -4px; }
+  .duration-hint {font-style: italic;}
   .duration-row li,
+  .duration-hint li,
   .date-start-row li,
   .categories-row {
     justify-content: space-between;