Add numerical input next to the slider and handle value 1-10#365
Add numerical input next to the slider and handle value 1-10#365martinRenou merged 10 commits intogeojupyter:mainfrom
Conversation
|
Integration tests report: appsharing.space |
|
Neat! I just tested it. I have two suggestions:
|
Yeah, this is done. Thanks I'll remove the labels too |
|
There's a small bug, slider doesn't change itself when i change input value after interacting with the slider - slider.mov |
| const value = parseFloat(target._value); | ||
| props.onChange(value); | ||
| const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range | ||
| const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range |
There was a problem hiding this comment.
I'm confused by the 0.1 choice here? Why not the 0-1 range?
There was a problem hiding this comment.
Because opacity need to be a multiple of 0.1, as defined in layer schemas - https://github.com/geojupyter/jupytergis/blob/main/packages/schema/src/schema/imageLayer.json#L16
There was a problem hiding this comment.
Fundamentally we might want to avoid making a layer fully transparent
There was a problem hiding this comment.
I'm not sure I agree with this, but no hard feeling. We can discuss that in an issue after merging this PR :)
I'll try to align it and update :) |
|
Also #365 (comment) this bug still persists :( we can maybe track this in a separate issue or would you have some tip in regard? |
|
I'm not able to reproduce the bug you see, do you have an error in the console when doing so? |
Nope |
I'm fine with this 👍🏽 |
opened #374 for this |
…ter#365) * Add numerical input next to the slider and handle value 1-10 * use react hook to sync values * min max * lint * Remove slider labels * lint * Align input box to the slider

Description
Checklist
Resolves #XXX.Failing lint checks can be resolved with:
pre-commit run --all-filesjlpm run lint📚 Documentation preview: https://jupytergis--365.org.readthedocs.build/en/365/
💡 JupyterLite preview: https://jupytergis--365.org.readthedocs.build/en/365/lite