From 8c58fb857abc47c7944d65b4a330db33aa2e8660 Mon Sep 17 00:00:00 2001
From: Jonathan Berrisch <Jonathan@Berrisch.biz>
Date: Sun, 18 May 2025 21:07:24 +0200
Subject: [PATCH] Adjust input size.

---
 app.qmd | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/app.qmd b/app.qmd
index 174c81b..aeb64d8 100644
--- a/app.qmd
+++ b/app.qmd
@@ -36,21 +36,34 @@ chart = {
   const filteredData = () => bsplineData.filter(d => selectedKnots == d.knots && Math.abs(selectedMu - d.mu) < 0.001);
   const container = d3.create("div").style("margin-bottom", "20px");
   // Knots slider control
-  const knotsControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  knotsControl.append("label").text("Knots:");
-  knotsControl.append("input")
-    .attr("type","range").attr("min",minKnots).attr("max",maxKnots).attr("step",1)
+  const knotsControl = container
+      .append("div")
+      .style("display","flex")
+      .style("align-items","center")
+      .style("gap","10px");
+  knotsControl
+      .append("label")
+      .text("Knots:")
+      .style("font-size","16px");
+  knotsControl
+    .append("input")
+    .attr("type","range")
+    .attr("min",minKnots)
+    .attr("max",maxKnots)
+    .attr("step",1)
     .property("value",selectedKnots)
+    .style("width","100px")             // narrower slider
+    .style("height","10px")              // thinner track
     .on("input", function() { selectedKnots = +this.value; knotsControl.select("span").text(selectedKnots); updateChart(filteredData()); });
-  knotsControl.append("span").text(selectedKnots);
+  knotsControl.append("span").text(selectedKnots).style("font-size","16px");;
   // μ slider control
   const muControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px");
-  muControl.append("label").text("μ:");
+  muControl.append("label").text("μ:").style("font-size","16px");
   muControl.append("input")
     .attr("type","range").attr("min",minMu).attr("max",maxMu).attr("step",0.1)
     .property("value",selectedMu)
     .on("input", function() { selectedMu = +this.value; muControl.select("span").text(selectedMu); updateChart(filteredData()); });
-  muControl.append("span").text(selectedMu);
+  muControl.append("span").text(selectedMu).style("font-size","16px");
   // Build SVG
    const width = 800;
    const height = 400;
@@ -94,11 +107,13 @@ chart = {
    const xAxis = g.append("g")
      .attr("transform", `translate(0,${innerHeight})`)
      .attr("class", "x-axis")
-     .call(d3.axisBottom(x).ticks(10));
+     .call(d3.axisBottom(x).ticks(10))
+     .style("font-size", "16px");
    
    const yAxis = g.append("g")
      .attr("class", "y-axis")
-     .call(d3.axisLeft(y).ticks(5));
+     .call(d3.axisLeft(y).ticks(5))
+     .style("font-size", "16px");
    
    // Add axis labels
   //  g.append("text")