Animate st.slider

Using Streamlit
, ,
1

I have a simple slider defined:

tfilter = st.slider(‘timestamp’, min_time, max_time, min_time)

I’d like the user to move the slider to set a start point and then to click a button to begin to animate the slider (move it slowly forward in time). Is there a way to update the slider position programmatically so that it can be updated with the mouse or via the script?

EDIT: This looks like a possible answer: Preserving state across sidebar pages - #2 by thiago

1 Like
2

This might be more relevant: Change the state of an item from code?

1 Like
3

Hi @davideps,

import streamlit as st
import time

slider_ph = st.empty()
info_ph = st.empty()

value = slider_ph.slider("slider", 0, 100, 25, 1)
info_ph.info(value)

if st.button('animate'):
    for x in range(20):
        time.sleep(.5)

        value = slider_ph.slider("slider", 0, 100, value + 1, 1)
        info_ph.info(value)
4

@Jonathan_Rhone, the code below seems identical to yours but throws a DuplicateWidgetID error. What am I doing wrong?

slider_ph = st.empty()
info_ph = st.empty()
tfilter = slider_ph.slider('timestamp', min_time, max_time, round((min_time + max_time) / 2), 1)
info_ph.info(tfilter)
if st.button('animate'):
    for x in range(100):
        time.sleep(0.5)
        tfilter = slider_ph.slider("timestamp", min_time, max_time, tfilter + 1, 1)
        info_ph.info(tfilter)
5

Hi @davideps

I tried running your code to see if I could help, but a lot of the code is missing. If you can provide a full (but minimal) code example, then I will take a second look.

Marc

6

Thanks @Marc. I intend to post a minimal example later this week.

7

Hey @davideps,

Turns out we don’t have great support for animating widgets at this time.

The issue occurs when you move the slider to before its default value then click animate. When it reaches its default value the DuplicateWidgetID error is thrown.

Here’s a snippet that’s a little better, it animates without error but if you move the slider after the animation is done, it jumps back to the default value.

import streamlit as st
import time

initial_value = 25

slider_ph = st.empty()
info_ph = st.empty()

value = slider_ph.slider("slider", 0, 50, initial_value, 1, key="initial")
info_ph.info(value)

if st.button('animate'):
    for x in range(50 - value):
        time.sleep(.5)

        value = slider_ph.slider("slider", 0, 50, value + 1, 1, key="animated")
        info_ph.info(value)

Here’s our current thinking on how to support what you’re trying to do.

Let us know what you think!

import streamlit as st
import time

initial_value = 25

# This API is probably coming in the next couple of months:

slider_obj = st.elements.Slider("slider", 0, 100, initial_value, 1)
info_obj = st.elements.Info(value)

st.write(slider_obj)
st.write(info_obj)

if st.button('animate'):
    for x in range(100-value):
        time.sleep(.5)
        # This API will take a little more work. 
        # Probably a couple more months after that.
        slider_obj.value += 1
        info_obj.body = slider_obj.value
1 Like
8

Thanks @Jonathan_Rhone, that confirms my observations and saves me from removing a lot of functions to create a minimal example. My job involves data visualization. I’d really like to have a Python library that permits both creating interactive exploration web apps and documenting findings via real-time animations and offline rendering of JPG or PNG frames. The exploratory phase comes first and help identify interesting content and plan how it should be presented. The documenting stage comes second, producing a concise, choreographed trip through the data (possibly by following key frames set in the first stage).

EDIT: the proposed API look good. In the animate example, will one need to call st.write() on the slider_obj and info_obj to update the widget display or will setting new value be sufficient? I’d also like a way to save the output as a series of JPG or PNG files.

9

Is there any update on this proposed API? This is exactly what I am currently looking for.