dash-labs

dash-labs copied to clipboard

For number based text input, there are up and down arrows allowing user to click and change the value in the input. However, when it is a constrained number with min, max and step, I've noticed that there is no quick way for user to jump from min to max value i.e. wrapping around min to max value. My suggestion on top of existing min, max and step, Dash could provide a new "wraparound" attribute so that user could traverse from min to max number should all min, max and step values are provided.

Hey @viper7882 - this is a great idea, and would be a good use-case for the new All-In-One component: https://dash.plotly.com/all-in-one-components.

If you create this, please feel free to share it on the Dash Community Forum. I'm sure a lot of people would be very interested!

Hi @AnnMarieW,

I've been putting some thoughts into your comments for a couple days before replying. My apology for the late reply.

What an interesting way for you to help promoting AIO component. It is definitely something new for us to explore.

Based on my experience, I thought my suggestion to include wraparound the text value should be less than 10 lines of code changes at your end?

Details:

1. Expose a new parameter to allow wraparound, say

wraparound = True/False

2. In the existing code where text input is number:

if up_arrow or down_arrow:
    if wraparound is True:
       if text_value == max
          text_value = min
       elif text_value == min
          text_value = max
    else:
       # Regular increment or decrement

3. Documentation update

Should be trivial changes, no?

Oh, I see what you want. I thought you wanted buttons that wrapped the input (ie either side of the input) that would go to either the min or the max value. Just like with pagination buttons that go to the first or last page. That would actually be a good use-case for the AIO component because it would wrap 3 components and the callbacks needed to populate the input field with either the min or the max when the button is clicked. (I kinda like this idea - I might try to make this one :-)

It seems like an odd UI though to go to from a max to a min without a stop. Can you say more about your use case? And actually this would be a great question for the forum. It would be nice to know if there is a lot of demand for this functionality.

Words can be misleading. Luckily we've spent time to clarify the ask and I'm glad to hear that you have gotten a better idea out of this conversation ^_^

Actually it is not odd but necessary for certain application. The practical use case would be for text that has very large min and max range where user wanted to configure the max value. Imagine the max value is programmed to be 1 million with step size of 1, in order to increment the text box all the way from 1 to value of 1 million, that will involve a lot of trial and error with the app.

The challenge that I've observed is that the app could dynamically assign the max value for text box and that's the whole idea of provide flexibility for app designer. However, the price is for the user to pay by spending time to guess the dynamically created max value. I'm certain my user doesn't enjoy doing so. The current workaround is to display another label to user about the dynamic max value which IMHO it can be done in a more professional way.

In the event if you would like to bring this enhancement to the next level, for large max-min range, upon scrolling up/down the value, if user is press and holding the arrow, the increment size should be moved in the log scale instead of linear scale. I realize this is more difficult to implement, therefore only FYI.