ReactiveHTML: ValueError: failed to validate

[MarcSkovMadsen]

I'm on the main branch of Panel using Bokeh 3.2.1. I'm working on improving the ReactiveHTML docs.

When I serve the below I get

import panel as pn
import param

pn.extension()

class CustomGauge(pn.reactive.ReactiveHTML):
  value = param.Integer(0, bounds=(0,100))

  _child_config = {"value": "literal"}
  
  _template=  """
<div id="container" class="pn-container">${value}</div>
"""

gauge = CustomGauge(value=55, styles={"border": "2px solid lightgray"}, height=400, sizing_mode="stretch_width")

pn.Column(gauge, gauge.param.value).servable()

ValueError: failed to validate value2(id='p1014', ...).value: expected a value of type str, got 55 of type int

I believe its a bug.

[MarcSkovMadsen]

Trying to figure out what works and what does not work I played with the SlideShow example. Changing the index to a String parameter.

I want to use the value both in the src attribute and in a div.

import panel as pn
import param

from panel.reactive import ReactiveHTML

pn.extension()

class Slideshow(ReactiveHTML):

    index = param.String(default="0")

    _child_config = {"index": "literal"}

    _template = '<img id="slideshow" src="https://picsum.photos/800/300?image=${index}" onclick="${_img_click}"></img><div id="other">${index}</div>'

    def _img_click(self, event):
        self.index = str(int(self.index)+1)
        print(self.index)


Slideshow(width=500, height=200).servable()

When I click the image the div value updates but the image src does not.