Addition of explicit value of sliders #211
Open
Conversation
This file contains 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
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
|
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> | ||
| ); | ||
| }; |
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]); |
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> | ||
| ); | ||
| }, |
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 |
There was a problem hiding this comment.
should read the settings directly from here?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
