diff --git a/ascii_bicorder.py b/ascii_bicorder.py
index a3c71d9..b0ca4d3 100644
--- a/ascii_bicorder.py
+++ b/ascii_bicorder.py
@@ -16,19 +16,29 @@ def center_text(text, width):
 def format_gradient_bar(value):
     """
     Format the gradient bar based on value.
-    If value is None, show all bars: [|||||||||]
-    If value is 0-8, replace that position with #: [|#||||||||]
+    If value is None, show all dashes: [---------]
+    If value is 1-9, show the number at its position: [----5----]
     """
     if value is None:
-        return "[|||||||||]"
+        return "[---------]"
 
-    # Ensure value is in valid range
-    if not isinstance(value, int) or value < 0 or value > 8:
-        return "[|||||||||]"
+    # Ensure value is in valid range (1-9)
+    if not isinstance(value, int) or value < 1 or value > 9:
+        return "[---------]"
 
-    bars = list("|||||||||")
-    bars[value] = "#"
-    return "[" + "".join(bars) + "]"
+    # Create bar with value at the correct position
+    bars = [
+        "[1--------]",  # value 1
+        "[-2-------]",  # value 2
+        "[--3------]",  # value 3
+        "[---4-----]",  # value 4
+        "[----5----]",  # value 5
+        "[-----6---]",  # value 6
+        "[------7--]",  # value 7
+        "[-------8-]",  # value 8
+        "[--------9]"   # value 9
+    ]
+    return bars[value - 1]
 
 
 def format_gradient_line(term_left, term_right, value, left_width, right_width, center_width):
diff --git a/bicorder-app/src/components/GradientSlider.svelte b/bicorder-app/src/components/GradientSlider.svelte
index 6a4164f..8587211 100644
--- a/bicorder-app/src/components/GradientSlider.svelte
+++ b/bicorder-app/src/components/GradientSlider.svelte
@@ -72,23 +72,23 @@
   }
 
   function renderBar(value: number | null): string {
-    // Fixed scale with 9 positions using ||||#||||
+    // Slider-style visualization with brackets and value number
     if (value === null) {
-      return '||||·||||';
+      return '[----X----]';
     }
-    // Value is 1-9, position the # marker at the right spot
-    const positions = [
-      '#||||||||',
-      '|#|||||||',
-      '||#||||||',
-      '|||#|||||',
-      '||||#||||',
-      '|||||#|||',
-      '||||||#||',
-      '|||||||#|',
-      '||||||||#'
+    // Value is 1-9, show the number at its position along the slider
+    const bars = [
+      '[1--------]',  // value 1
+      '[-2-------]',  // value 2
+      '[--3------]',  // value 3
+      '[---4-----]',  // value 4
+      '[----5----]',  // value 5 (centered)
+      '[-----6---]',  // value 6
+      '[------7--]',  // value 7
+      '[-------8-]',  // value 8
+      '[--------9]'   // value 9
     ];
-    return positions[value - 1];
+    return bars[value - 1];
   }
 
   $: barDisplay = renderBar(gradient.value);