diff --git a/resources/views/soal/index.blade.php b/resources/views/soal/index.blade.php
index e05056b..1cf19cf 100644
--- a/resources/views/soal/index.blade.php
+++ b/resources/views/soal/index.blade.php
@@ -86,82 +86,114 @@
     .dual-form-wrapper .form-label {
         font-weight: 600;
     }
-    /* Skala di atas slider */
+ /* Skala di atas slider */
     .range-scale {
         position: relative;
-        height: 40px;
-        margin-bottom: 8px;
+        height: 45px;
+        margin-top: 0px;
+        border-top: 2px solid #495057;
+        padding-top: 2px;
+    }
+
+    .range-track-colored {
+        position: relative;
+        margin-top: 0px;
     }
 
     .range-track-colored .range-colored {
         width: 100%;
         -webkit-appearance: none;
-        background: #ffffff;      /* default putih, nanti diwarnai JS */
-        height: 8px;
-        border-radius: 4px;
+        background: #ffffff;
+        height: 10px;
+        border-radius: 5px;
+        border: 1px solid #dee2e6;
     }
 
     /* hilangkan track default browser */
     .range-colored::-webkit-slider-runnable-track {
         background: transparent;
-        height: 8px;
+        height: 10px;
     }
     .range-colored::-moz-range-track {
         background: transparent;
-        height: 8px;
+        height: 10px;
     }
 
     /* thumb */
     .range-colored::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 14px;
-        height: 14px;
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
-        background: #000;
+        background: #0d6efd;
         cursor: pointer;
         position: relative;
         z-index: 2;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     }
     .range-colored::-moz-range-thumb {
-        width: 14px;
-        height: 14px;
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
-        background: #000;
+        background: #0d6efd;
         cursor: pointer;
         position: relative;
         z-index: 2;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     }
 
-
     .range-scale-item {
         position: absolute;
-        bottom: 0;
+        top: 0;
         transform: translateX(-50%);
         text-align: center;
-        font-size: 10px;
-        color: #555;
+        font-size: 11px;
+        color: #495057;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .range-scale-label {
+        display: block;
+        margin-bottom: 4px;
+        font-weight: 500;
     }
 
     .range-scale-mark {
         display: block;
         width: 1px;
         height: 8px;
-        margin-top:-10px;
-        background-color: #555;
+        background-color: #495057;
     }
 
-    /* Tick besar tiap 10 */
+    /* Tick besar untuk angka 1 dan kelipatan 10 */
     .range-scale-item-major .range-scale-mark {
         height: 12px;
-        background-color: #000;
+        width: 2px;
+        background-color: #212529;
+    }
+
+    .range-scale-item-major .range-scale-label {
         font-weight: 600;
+        color: #212529;
+        font-size: 12px;
     }
 
-    /* Tick khusus angka 1 biar lebih pendek (opsional) */
+    /* Tick khusus angka 1 */
     .range-scale-item-one .range-scale-mark {
-        height: 10px;
+        height: 12px;
+        background-color: #212529;
+        width: 2px;
     }
 
+    .range-scale-item-one .range-scale-label {
+        color: #212529;
+        font-weight: 600;
+        font-size: 12px;
+    }
 </style>
 @endsection
 
@@ -430,28 +462,6 @@
                 @elseif ($type === 'option_with_range')
                   @if ($rangeMin !== null && $rangeMax !== null)
                     <div class="range-slider-wrapper" data-range-wrapper="{{ $detail->id }}">
-                        <div class="range-scale" aria-hidden="true">
-                        @foreach ($rangeTicks as $tick)
-                            @php
-                            $value      = (int) $tick['value'];
-                            $label      = $tick['label']; // bisa null
-                            $isMajor    = ($value === 1) || ($value % 10 === 0);
-                            $isOneTick  = ($value === 1);
-                            @endphp
-                            <div class="range-scale-item
-                                        {{ $isMajor ? 'range-scale-item-major' : '' }}
-                                        {{ $isOneTick ? 'range-scale-item-one' : '' }}"
-                                style="left: {{ $tick['position'] }}%;">
-                            <span class="range-scale-mark"></span>
-
-                            @if(!is_null($label))
-                                <span class="range-scale-label">{{ $label }}</span>
-                            @endif
-                            </div>
-                        @endforeach
-                        </div>
-
-
                         {{-- Track warna + slider --}}
                         <div class="range-track-colored">
                             <input type="range"
@@ -468,7 +478,27 @@
                                 @if ($isConsentQuestion) data-consent-input="1" required @endif
                                 @if($formLocked) disabled @endif>
                         </div>
+                        <div class="range-scale" aria-hidden="true">
+                            @foreach ($rangeTicks as $tick)
+                                @php
+                                $value      = (int) $tick['value'];
+                                $label      = $tick['label']; // bisa null
+                                $isMajor    = ($value === 1) || ($value % 10 === 0);
+                                $isOneTick  = ($value === 1);
+                                @endphp
 
+                                <div class="range-scale-item
+                                            {{ $isMajor ? 'range-scale-item-major' : '' }}
+                                            {{ $isOneTick ? 'range-scale-item-one' : '' }}"
+                                    style="left: {{ $tick['position'] }}%;">
+                                <span class="range-scale-mark"></span>
+
+                                @if(!is_null($label))
+                                    <span class="range-scale-label">{{ $label }}</span>
+                                @endif
+                                </div>
+                            @endforeach
+                        </div>
                         <div class="text-center mt-2 fw-semibold">
                             Nilai saat ini:
                             <span data-range-output="{{ $detail->id }}">{{ $rangeDefaultDisplay ?? $rangeMinDisplay }}</span>