Struggling to create seamless slider action (slider changes brightness of image)

Custom Components
,
1

Hi,
In my application I present a simple square image with python Pillow library. The idea is to have the slider change the image, so that when it’s at 0 the image is white and if it’s at 100, the image is black, with shades of grey inbetween accordingly. My initial solution was the following:

import streamlit as st
from PIL import Image

sliderVal = st.slider("Choose the color", max_value = 100)        
compBox = Image.new('L', (100, 100), (int(sliderVal*2.55)))
st.image(compBox)

But this is painfully slow as it seems that every time the value is updated the whole page is rerunning? I need a seamless transition. I’ve seen that there are ways to improve slider functionality using the st.cache component, but I don’t really understand how to use it in my particular case. Do I need to use the slider in a function?

Would be very thankful about some pointers in the right direction.

2

I suspect you need to make a custom component to get the smooth behavior you desire. Streamlit reruns with every change in value of an input, so I think you will be stuck with at least some jitter no matter how much you optimize. If you create a component, you can have the action handled by javascript without reloading the page.