Updated ASCII slider interface

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 None, show all dashes: [---------]
-    If value is 0-8, replace that position with #: [|#||||||||]
+    If value is 1-9, show the number at its position: [----5----]
     """
     if value is None:
-        return "[|||||||||]"
+        return "[---------]"
 
-    # Ensure value is in valid range
+    # Ensure value is in valid range (1-9)
-    if not isinstance(value, int) or value < 0 or value > 8:
+    if not isinstance(value, int) or value < 1 or value > 9:
-        return "[|||||||||]"
+        return "[---------]"
 
-    bars = list("|||||||||")
+    # Create bar with value at the correct position
-    bars[value] = "#"
+    bars = [
-    return "[" + "".join(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):

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
+    // Value is 1-9, show the number at its position along the slider
-    const positions = [
+    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);