diff --git a/assets/main.scss b/assets/main.scss
index 4a0a29c..f9c8282 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -180,10 +180,11 @@ a[href^="#"] {
     &_calc {
         @apply py-0 relative;
 
-        > .container:first-child {
+        >.container:first-child {
             @apply relative h-[50vh] min-h-[600px] justify-between;
-            > * {
-                @apply z-10 
+
+            >* {
+                @apply z-10
             }
         }
 
@@ -280,13 +281,30 @@ label {
 }
 
 input {
-    @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black;
+    @apply bg-white border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black;
 }
 
 input[type=checkbox] {
     @apply w-4 h-4;
 }
 
+input[type=range] {
+    @apply bg-neutral-300 appearance-none h-1 ;
+    // [&::-webkit-slider-runnable-track]:h-1 
+    // [&::-moz-range-track]:h-1  
+    // [&::-webkit-slider-thumb]:bg-[#61C4FF] [&::-webkit-slider-thumb]:w-8
+    // [&::-moz-range-thumb]:bg-[#61C4FF]
+    // ;
+    &::-moz-range-track,
+    &::-webkit-slider-runnable-track {
+        @apply h-1 bg-red-500;
+    }
+    &::-moz-range-thumb,
+    &::-webkit-slider-thumb {
+        @apply bg-[#61C4FF] shadow-red-700;
+    }
+}
+
 textarea {
     @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
 }
@@ -327,7 +345,7 @@ button {
         }
 
         input[type=range] {
-            @apply min-w-[calc(100%-8rem)] xl:min-w-min;
+            @apply min-w-[calc(100%-8rem)] xl:min-w-min py-0 -translate-y-1/2;
         }
     }
 }
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 80a0ec1..051abc2 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -155,21 +155,21 @@ const goal = (target: string, params: object) => {
             <div class="form-row">
                 <div class="form-item w-full">
                     <label for="length">Длина ламельного блока, мм</label>
-                    <input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
+                    <input :value.input="`${form_state.length.toFixed(0)} мм`" class="w-full" />
                     <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
                         v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
                 </div>
                 <div class="form-item w-full">
                     <label for="height">Высота забора, мм</label>
-                    <input disabled :value="`${form_state.height} мм`" class="w-28" />
+                    <input :value="`${form_state.height} мм`" class="w-full" />
                     <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
                         v-model="form_state.height" :ref="form_refs.height" />
                 </div>
 
                 <div class="form-item">
                     <label for="total_length">Общая длина забора, м</label>
-                    <input type="number" id="total_length" v-bind="parametric.total_length" min=0
-                        v-model="form_state.total_length" :ref="form_refs.total_length" />
+                    <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
+                        v-model="form_state.total_length" :ref="form_refs.total_length"  class="w-full"/>
                 </div>
 
                 <div class="form-item form-item_checkbox">