Addition of explicit value of sliders#211
Closed
Cipulot wants to merge 6 commits intothe-via:mainfrom
Closed
Conversation
Adds explicit value view of the current slider value. The value updates on the fly when the slider is moving.
Fixes issue where the change in the value being displayed causes the slider to be resized on the left.
Fixes possible errors with undefined values and types
Contributor
Author
|
Implemented a toggle that enables this feature or leaves it disabled: The default value has been set to FALSE. |
Xelus22
requested changes
Jul 26, 2024
Comment on lines
+61
to
+75
| return ( | ||
| <Container> | ||
| <ValueDisplay>{sliderValue}</ValueDisplay> | ||
| <SliderInput | ||
| ref={inputRef} | ||
| {...props} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | ||
| const value = +e.target.value; | ||
| setSliderValue(value); | ||
| props.onChange?.(value); | ||
| }} | ||
| /> | ||
| </Container> | ||
| ); | ||
| }; |
Contributor
There was a problem hiding this comment.
so u dont need the if else just for showingSliderValue
Suggested change
| return ( | |
| <Container> | |
| <ValueDisplay>{sliderValue}</ValueDisplay> | |
| <SliderInput | |
| ref={inputRef} | |
| {...props} | |
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | |
| const value = +e.target.value; | |
| setSliderValue(value); | |
| props.onChange?.(value); | |
| }} | |
| /> | |
| </Container> | |
| ); | |
| }; | |
| return ( | |
| <Container> | |
| { showingSliderValue && | |
| <ValueDisplay>{sliderValue}</ValueDisplay> | |
| } | |
| <SliderInput | |
| ref={inputRef} | |
| {...props} | |
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | |
| const value = +e.target.value; | |
| setSliderValue(value); | |
| props.onChange?.(value); | |
| }} | |
| /> | |
| </Container> | |
| ); | |
| }; |
Comment on lines
+37
to
+41
| useEffect(() => { | ||
| if (inputRef.current) { | ||
| setSliderValue(+inputRef.current.value || 0); // Provide a default value | ||
| } | ||
| }, [props.value]); |
Contributor
There was a problem hiding this comment.
whats this for? it already initializes to zero... , setting the sliderValue each time props.value changes? doesnt the onChange below already do that?
Comment on lines
+33
to
+52
| (props: VIACustomControlProps & {_id: string}) => { | ||
| const showSliderValue = useSelector(getShowSliderValue); | ||
|
|
||
| return ( | ||
| <ControlRow id={props._id}> | ||
| <Label>{props.label}</Label> | ||
| <Detail> | ||
| {'type' in props ? ( | ||
| <VIACustomControl | ||
| {...props} | ||
| value={props.value && Array.from(props.value)} | ||
| showSliderValue={showSliderValue} | ||
| /> | ||
| ) : ( | ||
| props.content | ||
| )} | ||
| </Detail> | ||
| </ControlRow> | ||
| ); | ||
| }, |
Contributor
There was a problem hiding this comment.
Shouldn't need to edit this file in general?
| } | ||
|
|
||
| export const AccentRange: React.FC<AccentRangeProps> = (props) => { | ||
| const {showingSliderValue = false} = props; // Default showSliderValue to false if not provided |
Contributor
There was a problem hiding this comment.
should read the settings directly from here?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
This commit aims to provide precise visual feedback on the current value at which the slider is at.
This helps in case the slider is used for precise value input that benefits from a linear input method.
The value updates on the fly when the slider is moving and it's solid with the slider element when resizing the webpage view, to avoid it being wrongly rendered.
Here's a preview of the feature:
