Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[addon-knob] Display for Number value, min, max when slider is used. #2445

Closed
madhaze opened this issue Dec 7, 2017 · 12 comments
Closed

[addon-knob] Display for Number value, min, max when slider is used. #2445

madhaze opened this issue Dec 7, 2017 · 12 comments

Comments

@madhaze
Copy link

madhaze commented Dec 7, 2017

Feature Request:
It would be nice to have Value, Min and Max displayed when using the number knob range to give the user some context before they grab the slider.

@Hypnosphi
Copy link
Member

Looks like it may be relatively easy to implement using <datalist> element, see "A range control with hash marks and labels" section here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Feel free to send a PR, but please base it on release/3.3 branch

@cilice
Copy link

cilice commented Dec 11, 2017

Unfortunately, even if it's within the spec, no browsers support it fully right now (codepen https://codepen.io/cilice/pen/ypBWKM)

Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports the hash marks but doesn't support labels.

Unfortunately, latest Safari supports neither hash marks nor labels just like Firefox. ☹️

@apertureless
Copy link

apertureless commented Dec 19, 2017

Displaying the currentValue would be nice. Especially while development when you're tweaking some default values.

@stale
Copy link

stale bot commented Feb 2, 2018

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

@stale stale bot added the inactive label Feb 2, 2018
@mkochendorfer
Copy link

I am very interested in the feature request.

@stale stale bot removed the inactive label Feb 2, 2018
@Hypnosphi
Copy link
Member

@mkochendorfer want to open a PR?

@mkochendorfer
Copy link

I don't have the time this hit this right now, but possibly in the coming months.

@jeffcarey
Copy link
Contributor

jeffcarey commented Feb 8, 2018

I can work on this in the coming days. I'd propose something simple to get started: Minimum on the left, and "Current / Maximum" on the right. The UI can be enhanced later with tick marks and so on if browsers start supporting that more.

jeffcarey added a commit to jeffcarey/storybook that referenced this issue Mar 1, 2018
jeffcarey added a commit to jeffcarey/storybook that referenced this issue Mar 2, 2018
jeffcarey added a commit to jeffcarey/storybook that referenced this issue Mar 2, 2018
Hypnosphi added a commit that referenced this issue Mar 20, 2018
#2445 Add min, value, and max labels to range knob
@Hypnosphi
Copy link
Member

Released as 4.0.0-alpha.0

@madhaze
Copy link
Author

madhaze commented Mar 29, 2018

@Hypnosphi any chance of (#3128) being part of v3.4.0 release?

@Hypnosphi
Copy link
Member

Sorry, 3.4 is feature-frozen

@madhaze
Copy link
Author

madhaze commented Mar 29, 2018

figured. Thought it was worth asking :) 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants