Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: irojs/iro-core#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
any of the r/g/b sliders (RGB and Alpha sliders not keeping alpha value on interaction #227).
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
![1](https://user-images.githubusercontent.com/77293486/166661350-9487f507-c826-4837-9da7-7f059f9f72ea.png)
Picker with labels
![3](https://user-images.githubusercontent.com/77293486/166661376-074b87ce-b846-4122-976e-458c953e2007.png)