st.slider keyboard input

[xR86]

Problem

Sometimes using the st.slider feels clunky when I need to input a specific number I want. I know I can use a st.number_input, but a st.slider visually shows where my value is in the range. And I don't see a reason to use both, because it would make my interface more complicated than it needs to.

Solution

MVP: Making the //div[@data-testid='stThumbValue'] element editable:

• I would expect double-clicking on it (single click might create some issues with dragging maybe),
• it showing to be active/editable (seeing the cursor blink),
• being able to edit the number (backspace & num entry would be fine IMO, without necessarily needing to input in the middle of the number),
• with the expectation that on hitting Enter (maybe also on losing focus) that value is preserved (and the format being updated accordingly, if it can't be shown during the edit, eg: the percent %), as long as the value is valid - defined here as being:
  • valid type (int / float etc),
  • in the defined [min_value, max_value] range,
  • don't know about step - maybe it should be rounded to the nearest step ?
• if not valid, reset to the value before the interaction.

This would greatly enhance the usability of this component from my perspective, especially in contexts where you use a Streamlit app not just as a demo, but as a solution that you use daily.

(don't see how this could be broken between MVP and Preferred solution)

Possible additions: Having the possibility to undo the accepted change by hitting Ctrl+Z / Cmd+Z, though this already is connected to the below issue and might be a different ticket by itself (eg: undo for slider / undo for input widgets).

Additional context

It seems this is tangentially connected with #1291, though I would argue this should be part of the default behavior of this component, as it enhances your experience.

Please let me know if this isn't in the proper format or if it's not verbose enough.

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[lukasmasuch]

@xR86 Thanks for the suggestion! This sounds like a reasonable and useful suggestion. We will get this to our product team. In the meantime, it might also be an option for you to create a custom component. One of our tutorials here is about creating a custom slider widget :) that might help to get started.

[hoggatt]

Strongly agree that this is should be part of the standard st.slider component (preferably, enabled by default). I've been asked by customers on multiple occasions if this was possible and think the proposed implementation would be perfect.

Even for range sliders close to each other, I think making the red numbers editable (by double clicking which would highlight the whole field) would be intuitive to most people:

For time boxes, manual text entry that snaps to the nearest step would work well. It would be a bit more challenging for datetime since the format is less intuitive. Maybe if the format is invalid (and cannot be snapped to the nearest step), the entry reverts to the previous value.

[parchakeavinash]

In order to enhance the user experience of entering a specific number for a st.slider in Streamlit, we can consider combining the slider with an input field for direct numerical input. This way, users can either slide to the desired value or input the exact number.

import streamlit as st

def custom_slider_with_input(label, min_value, max_value, default_value): slider_value = st.slider(label, min_value, max_value, default_value) input_value = st.number_input(f"Enter {label}:", min_value, max_value, slider_value)

return input_value

Example

selected_value = custom_slider_with_input("Select a value", 0, 100, 50)

print selected value by the user

st.write(f"Selected Value: {selected_value}")

[LouisDeconinck]

I support this idea, would greatly improve the usability of the slider input.