import panel as pn

pn.extension(sizing_mode="stretch_width")

widget = pn.widgets.FloatSlider(name='Slider', start=0, end=10)
widget2 = pn.widgets.TextInput(name='Text')
widget3 = pn.widgets.RangeSlider(name='RangeSlider', start=0, end=10)

if pn.state.location:
    pn.state.location.sync(widget, {'value': 'slider_value'})
    pn.state.location.sync(widget2, {'value': 'text_value'})
    pn.state.location.sync(widget3, {'value': 'range_value'})

pn.Row(widget, widget2, widget3)

pn.template.FastListTemplate(
    site="Panel", 
    title="Sync Location", 
    main=[
        "This example demonstrates **how to sync widget state with the URL bar**. The widgets values are set from the URL parameters on page load and the URL parameters are set when a widget value changes.",
        pn.Column(widget, widget2, widget3),
    ], main_max_width="768px",
).servable();