GRADIO: Change position of second slider, when value lower than on first one

Question

I have 2 sliders created in Gradio:

 number1 = gr.Slider(0, 20, step=1, label='number1', default=0, interactive=True)
 number2 = gr.Slider(0, 20, step=1, label='number2', default=0, interactive=True)

 gr.Interface(add_function, [number1, number2], "number", live=True).launch(debug=True)

I would like to change position of second slider dynamically. When value of first slider is bigger than on second slider, second slider should get the same position as the first one, eg. first slider = 4 second slider = 1 Then second's slider position should change to 4 as well.

It is possible to do it using gr.Interface or only using Gradio Box?

Answer 1

Ok, I found solution using Gradio Box:

def compare(number1, number2):
    if number1 > number2:
        number2 = number1
    return number2


def add_function(number1, number2):
    return number2 + number1


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            slider1 = gr.Slider(0, 100, default=50, label="number1", interactive=True)
            slider2 = gr.Slider(0, 100, default=50, label="number2", interactive=True)
        with gr.Column():
            predict = gr.Button()
            output = gr.Number(label="output")

    slider1.change(compare, [slider1, slider2], slider2)
    click_event = predict.click(add_function, [slider1, slider2] , output)

demo.queue().launch()

Not so fast, but solve my problem :)