[SOLVED] Trigger event on mouseup instead of continuosly with panel slider widget

Trigger event on mouseup instead of continuosly with panel slider widget

How can a function watch for value changes of a panel.widgets.IntSlider, but only trigger when the mouse is released rather than continuously as the slider is dragged around?

I have tried callback_policy='mouseup' and decorated the function with @panel.depends(panel.widgets.IntSlider, watch=True), but the function is executed continuously when the slider is pulled around an not only when the mouse button is released. This is the full code:

import panel as pn


pn.extension()
int_slider = pn.widgets.IntSlider(
    name='Integer Slider', end=5, callback_policy='mouseup')

@pn.depends(int_slider.param.value, watch=True)
def print_slider_value(slider_value):
    return slider_value

pn.Column(int_slider, print_slider_value) #.app('localhost:8888')

I have tried both with and without .app() in the end and with 'throttle' instead of 'mouseup', same result. I am trying this in the JupyterLab notebook and I have the PyViz extension installed.

bokeh       1.2.0
panel       0.6.0
IPython     6.5.0
jupyter_client  5.2.3
jupyter_core    4.4.0
jupyterlab  1.0.2
notebook    5.6.0

Solution

I checked the source code of panel and found that it didn't define the value_throttled property. To solve the problem, you need to create a class that inheritance from IntSlider and add the value_throttled property. Then you can watch on value_throttled.

import panel as pn
import param

class IntThrottledSlider(pn.widgets.IntSlider):
    value_throttled = param.Integer(default=0)

int_slider = IntThrottledSlider(
    name='Integer Slider', end=5, callback_policy='mouseup')

@pn.depends(int_slider.param.value_throttled, watch=True)
def print_slider_value(slider_value):
    return slider_value

pn.Column(int_slider, print_slider_value)