feat(plotly): implement slider-control-basic (#3095)

## Implementation: `slider-control-basic` - plotly

Implements the **plotly** version of `slider-control-basic`.

**File:** `plots/slider-control-basic/implementations/plotly.py`

**Parent Issue:** #3071

---
:robot: *[impl-generate
workflow](https://github.com/MarkusNeusinger/pyplots/actions/runs/20620342660)*

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

plots/slider-control-basic/implementations/plotly.py

@@ -0,0 +1,117 @@
+""" pyplots.ai
+slider-control-basic: Interactive Plot with Slider Control
+Library: plotly 6.5.0 | Python 3.13.11
+Quality: 92/100 | Created: 2025-12-31
+"""
+
+import numpy as np
+import plotly.graph_objects as go
+
+
+# Data - Quarterly sales data for multiple years
+np.random.seed(42)
+years = [2019, 2020, 2021, 2022, 2023, 2024]
+quarters = ["Q1", "Q2", "Q3", "Q4"]
+
+# Generate sales data with yearly growth trend
+sales_data = {}
+base_sales = [120, 145, 160, 135]  # Q1-Q4 seasonal pattern
+for i, year in enumerate(years):
+    growth = 1 + i * 0.08 + np.random.uniform(-0.05, 0.05)
+    noise = np.random.normal(0, 10, 4)
+    sales_data[year] = np.maximum(50, np.array(base_sales) * growth + noise)
+
+# Create figure with initial year (2019)
+fig = go.Figure()
+
+# Add trace for bar chart
+fig.add_trace(
+    go.Bar(
+        x=quarters,
+        y=sales_data[2019],
+        marker=dict(color="#306998"),
+        name="Quarterly Sales",
+        text=[f"${v:.0f}K" for v in sales_data[2019]],
+        textposition="outside",
+        textfont=dict(size=16),
+    )
+)
+
+# Create slider steps
+steps = []
+for year in years:
+    step = dict(
+        method="update",
+        args=[
+            {"y": [sales_data[year]], "text": [[f"${v:.0f}K" for v in sales_data[year]]]},
+            {
+                "title.text": f"Quarterly Sales Performance · {year}<br><sup>slider-control-basic · plotly · pyplots.ai</sup>"
+            },
+        ],
+        label=str(year),
+    )
+    steps.append(step)
+
+# Create slider
+sliders = [
+    dict(
+        active=0,
+        currentvalue=dict(prefix="Year: ", visible=True, xanchor="center", font=dict(size=20, color="#306998")),
+        pad=dict(t=60, b=20),
+        len=0.7,
+        x=0.15,
+        xanchor="left",
+        steps=steps,
+        ticklen=8,
+        tickwidth=2,
+        font=dict(size=16),
+        bgcolor="#E0E0E0",
+        activebgcolor="#FFD43B",
+        bordercolor="#306998",
+        borderwidth=2,
+    )
+]
+
+# Update layout
+fig.update_layout(
+    title=dict(
+        text="Quarterly Sales Performance · 2019<br><sup>slider-control-basic · plotly · pyplots.ai</sup>",
+        font=dict(size=28),
+        x=0.5,
+        xanchor="center",
+    ),
+    xaxis=dict(title=dict(text="Quarter", font=dict(size=22)), tickfont=dict(size=18)),
+    yaxis=dict(
+        title=dict(text="Sales ($ Thousands)", font=dict(size=22)),
+        tickfont=dict(size=18),
+        range=[0, 280],
+        gridcolor="rgba(0,0,0,0.1)",
+        gridwidth=1,
+    ),
+    sliders=sliders,
+    template="plotly_white",
+    margin=dict(t=120, b=160, l=100, r=80),
+    showlegend=False,
+    plot_bgcolor="white",
+    annotations=[
+        dict(
+            text="Drag the slider to explore sales data by year",
+            xref="paper",
+            yref="paper",
+            x=0.5,
+            y=-0.32,
+            showarrow=False,
+            font=dict(size=16, color="#666666"),
+            xanchor="center",
+        )
+    ],
+)
+
+# Update bar appearance
+fig.update_traces(marker=dict(line=dict(color="#1a3a5c", width=2)), width=0.6)
+
+# Save as PNG (4800 x 2700 px)
+fig.write_image("plot.png", width=1600, height=900, scale=3)
+
+# Save as interactive HTML
+fig.write_html("plot.html", include_plotlyjs=True, full_html=True)

plots/slider-control-basic/metadata/plotly.yaml

@@ -0,0 +1,28 @@
+library: plotly
+specification_id: slider-control-basic
+created: '2025-12-31T13:53:34Z'
+updated: '2025-12-31T14:00:57Z'
+generated_by: claude-opus-4-5-20251101
+workflow_run: 20620342660
+issue: 3071
+python_version: 3.13.11
+library_version: 6.5.0
+preview_url: https://storage.googleapis.com/pyplots-images/plots/slider-control-basic/plotly/plot.png
+preview_thumb: https://storage.googleapis.com/pyplots-images/plots/slider-control-basic/plotly/plot_thumb.png
+preview_html: https://storage.googleapis.com/pyplots-images/plots/slider-control-basic/plotly/plot.html
+quality_score: 92
+review:
+  strengths:
+  - Excellent use of Plotly slider component with well-configured steps and currentvalue
+    display
+  - Clean, professional visual design with properly sized fonts and good color choice
+  - Realistic business scenario (quarterly sales) that demonstrates the slider year-filtering
+    capability
+  - Dynamic title updates when slider changes year
+  - Helpful annotation text guiding users to interact with the slider
+  - Both PNG and HTML outputs generated for static and interactive viewing
+  weaknesses:
+  - Grid lines are too faint (alpha=0.1 effectively invisible) - should be more visible
+    (alpha 0.2-0.3)
+  - Spec mentions play/pause animation option if supported - Plotly supports this
+    but it was not implemented