app.py

import gradio as gr

def func(percent, numBlocks):
    filledSquares = "<div style='height:50px;width:50px;background-color:#555;display:inline-block'></div> "
    emptySquares = "<div style='height:50px;width:50px;background-color:#999;display:inline-block'></div> "
    numFilled = round((percent/100) * numBlocks)
    print(f"numFilled: {numFilled}")
    numEmpty = numBlocks - numFilled
    print(f"numEmpty: {numEmpty}")
    HTMLstr = filledSquares * numFilled + emptySquares * numEmpty
    return HTMLstr
    
    

with gr.Blocks() as demo:
    percent = gr.Slider(1, 100, value=50)
    numBlocks = gr.Slider(3, 20, value=4)
    button = gr.Button("button")
    button.click(func, inputs=[percent, numBlocks], outputs=gr.HTML())

demo.launch()