Controls

Width slider, scale slider, and card count selector components.

render_width_slider

Range slider for adjusting the card stack viewport width. The oninput handler references the namespaced JS function window.cardStacks[prefix].updateWidth().

---

source

render_width_slider

def render_width_slider(
    config:CardStackConfig, # Card stack configuration
    ids:CardStackHtmlIds, # HTML IDs for this instance
    card_width:int=80, # Current card width in rem
)->Any: # Width slider component

Render the card stack width slider control.

# Test render_width_slider
from fasthtml.common import to_xml
from cjm_fasthtml_card_stack.core.config import CardStackConfig, _reset_prefix_counter

_reset_prefix_counter()
config = CardStackConfig(prefix="test")
ids = CardStackHtmlIds(prefix="test")

slider = render_width_slider(config, ids, card_width=60)
html = to_xml(slider)
assert 'id="test-width-slider"' in html
assert 'min="30"' in html
assert 'max="120"' in html
assert 'step="5"' in html
assert 'value="60"' in html
assert "window.cardStacks['test'].updateWidth" in html
assert "Narrow" in html
assert "Wide" in html
print("render_width_slider tests passed!")

render_width_slider tests passed!

render_scale_slider

Range slider for adjusting card content scale. Works the same way as the width slider but controls the card_scale percentage.

---

source

render_scale_slider

def render_scale_slider(
    config:CardStackConfig, # Card stack configuration
    ids:CardStackHtmlIds, # HTML IDs for this instance
    card_scale:int=100, # Current scale percentage
)->Any: # Scale slider component

Render the card stack scale slider control.

# Test render_scale_slider
slider = render_scale_slider(config, ids, card_scale=150)
html = to_xml(slider)
assert 'id="test-scale-slider"' in html
assert 'min="50"' in html
assert 'max="200"' in html
assert 'step="10"' in html
assert 'value="150"' in html
assert "window.cardStacks['test'].updateScale" in html
assert "Smaller" in html
assert "Larger" in html
print("render_scale_slider tests passed!")

render_scale_slider tests passed!

render_card_count_select

Dropdown selector for changing the number of visible cards in the viewport. Triggers a full viewport re-render via the namespaced JS function.

---

source

render_card_count_select

def render_card_count_select(
    config:CardStackConfig, # Card stack configuration
    ids:CardStackHtmlIds, # HTML IDs for this instance
    current_count:int=1, # Currently selected card count
    is_auto_mode:bool=True, # Whether auto-adjust mode is active
)->Any: # Card count dropdown component

Render the card count dropdown selector.

# Test render_card_count_select — default is auto mode
select_el = render_card_count_select(config, ids)
html = to_xml(select_el)
assert 'id="test-card-count-select"' in html
assert "window.cardStacks['test'].handleCountChange" in html
assert 'value="auto" selected' in html  # Auto selected by default
assert "Auto" in html
assert "1 card" in html
assert "3 cards" in html
assert "5 cards" in html
assert "7 cards" in html
assert "9 cards" in html
print("render_card_count_select default tests passed!")

# Test with custom visible_count_options
custom_config = CardStackConfig(prefix="custom", visible_count_options=(3, 5, 7))
custom_ids = CardStackHtmlIds(prefix="custom")
select_el = render_card_count_select(custom_config, custom_ids)
html = to_xml(select_el)
assert "1 card" not in html  # Not in custom options
assert "3 cards" in html
assert "9 cards" not in html  # Not in custom options
assert "Auto" in html  # Auto always present
assert 'value="auto" selected' in html  # Auto selected by default
print("Custom options test passed!")

# Test is_auto_mode=False selects numeric option
select_manual = render_card_count_select(config, ids, current_count=5, is_auto_mode=False)
html_manual = to_xml(select_manual)
assert 'value="auto" selected' not in html_manual  # Auto NOT selected
assert 'value="5" selected' in html_manual  # Numeric should be selected
print("is_auto_mode=False test passed!")