iro.js
iro.js copied to clipboard
jaames
Slider Label and Value feature
Currently used Version: 5.5.2
UPDATE 03.05.22
Better vertical slider support!
New file: label.tsx
A small component for a little label next to a slider. (moved from input.tsx) Added a showLabel property to sliderProps. Now label and input field can both be displayed independently from each other. The corresponding iro.core functionality has been updated to allow for more versatile layout, and fixes the horizontal layout (vertical sliders) when initializing with label/input fields.
Note: A before/after option may be added to the label element (show to left/right of slider element), but it's more complex as it changes slider handle position when dragging.
Description
This PR includes a feature that implements an optional label and optional editable input field for the iro.js Slider component. As an unplanned 'side effect', I also added an option to manually specify the slider length!
See the corresponding PR for iro/core: https://github.com/irojs/iro-core/pull/6
Motivation
I found that, having more than a few sliders, it really wasn't clear anymore which slider was changing which value, so I decided to fork and try to solve the issue, potentially increasing clarity for other users as well. A project I am working on also requires channel values to be displayed for each slider, and editing single channels as well.
I think having the option to display each channel's value is a neat addition to the existing functionality, especially since the nature of iro's build makes it hard to add this kind of content externally.
Fixes
- Fixed an issue where alpha value was reset to 1 after sliding both alpha and any of the r/g/b sliders (#227).
- Fixed an issue with inaccurate kelvin conversion (replaced with more accurate script).
Changes
Modified: slider.tsx
Slider props now accept three now options: showInput, showLabel and disabled (both type boolean). The showInput property renders an input field when true, the showLabel property renders a label, and the disabled property disables the input field for user interaction. In order to allow for more contained positioning, I allowed the slider width to be different from box width. This allows for sliders with input fields to fit neatly under the iro Box/wheel. For positioning, I added a wrapper around the slider elements and set display to flex:none instead of block:none. In order to set a slider's length (by default, width), one can pass a sliderLength property, but enabling input field overrides this behaviour.
New file: input.tsx
The Input component renders a span and input field for each slider, updating its value based on activeColor. On user interaction (typing or copying from clipboard), the activeColor value gets updated as well. I used the clamp() function coupled with Regex in iro/core to validate user input.
New file: label.tsx
The label component renders a label next to a slider.
Other Layout Examples
Vertical Picker with inputs and labels
Picker with labels
Hey Lena! Sorry for not checking in here sooner, just wanted to say this is a really cool feature idea and everything looks pretty solid so far. Please let me know if there's anything I can do to support this effort :)
As for tests, I honestly wouldn't worry about that for now. I'm hoping to completely redo how I do tests (and fully rewrite everything) with iro.js 6.0 whenever I get around to it.
Hi James! No Problem at all, thank you for replying!
I added and switched up a few more little things in the PR, so everything should run fairly smoothly now. From my side, I think this feature would be considered complete. It would be nice if you could find the time to look over the code a bit, and hopefully merge if it fits your requirements :) If there is any problems regarding the added feature, I'd be happy to modify things as needed.
I would love to see this in the next release, as this will be great accessibility improvement as well. See also #237 and #238.
As mentioned at the top of the readme; the project is currently on hiatus until I have the time/money to work on it again. Thanks.