FastHtml (MonsterUI) demo of slider Control adapted from split.js (https://split.js.org)

fh_splitjs_demo.py

from fasthtml.common import *
from monsterui.all import *

scripts = [Script(src=script, type='text/javascript') for script in  [
    "https://cdn.jsdelivr.net/npm/split.js"
]]

links = [Link(rel="stylesheet", href=link) for link in [
]]

SPLIT_STYLE = """
.gutter {
    background-color: #999;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}
"""

hdrs = [ scripts, links, Style(SPLIT_STYLE), Theme.slate.headers() ]
app, rt = fast_app( live=True,  hdrs=hdrs)

SPLITH = """
    Split(['{left_selector}','{right_selector}'], {{
        sizes: [{left_limit}, {right_limit}],
        minSize: 100,
        gutterSize: 7,
        gutterClass: 'table-gutter',
        cursor: 'ew-resize'
    }});
"""

def HSplit(*a, left_limit=50, right_limit=20, left_selector=None,right_selector=None,**kwa):
    __args = dict(
        left_selector = left_selector or "#" + getattr(a[0], 'id'),
        right_selector = right_selector or "#" + getattr(a[1], 'id'),
        left_limit = left_limit,
        right_limit = right_limit
    )
    return Div( *a, cls='flex', style="", **kwa), Script(SPLITH.format(**__args))

@rt
def index():
    
    container = (
        DividerSplit(P(" %50 wide with 1:4 split")), 
        HSplit( 
          Card("10%", id='left'), 
          Card("40%", id='right'),
          left_limit = 10,
          right_limit = 40
        ), 
        DividerSplit(P(" %100 wide 4:1 split")),
        HSplit( 
          Card("80%", id='leftB'), 
          Card("20%", id='rightB'),
          left_limit = 80,
          right_limit = 20
        ),
    )
    
    return container

serve()

This is a demo to try adapt split.js for use in FastHTML with MonsterUI.

using HSplit demonstrates a way to place a slider in your content in the FastHTML fashon. It is then resizable. Useful for adjustable sidebars.

check out split.js for more ways to use that.