Skip to content

Add numerical input next to the slider and handle value 1-10#365

Merged
martinRenou merged 10 commits intogeojupyter:mainfrom
arjxn-py:fix-slider
Jan 21, 2025
Merged

Add numerical input next to the slider and handle value 1-10#365
martinRenou merged 10 commits intogeojupyter:mainfrom
arjxn-py:fix-slider

Conversation

@arjxn-py
Copy link
Member

@arjxn-py arjxn-py commented Jan 20, 2025

Description

Checklist

  • PR has a descriptive title and content.
  • PR description contains references to any issues the PR resolves, e.g. Resolves #XXX.
  • PR has one of the labels: documentation, bug, enhancement, feature, maintenance
  • Checks are passing.
    Failing lint checks can be resolved with:
    • pre-commit run --all-files
    • jlpm run lint

📚 Documentation preview: https://jupytergis--365.org.readthedocs.build/en/365/
💡 JupyterLite preview: https://jupytergis--365.org.readthedocs.build/en/365/lite

@github-actions
Copy link
Contributor

Binder 👈 Launch a Binder on branch arjxn-py/jupytergis/fix-slider

@github-actions
Copy link
Contributor

github-actions bot commented Jan 20, 2025

Integration tests report: appsharing.space

@arjxn-py arjxn-py added bug Something isn't working enhancement New feature or request labels Jan 20, 2025
@arjxn-py arjxn-py marked this pull request as ready for review January 20, 2025 14:17
@arjxn-py arjxn-py requested a review from martinRenou January 20, 2025 14:18
@arjxn-py arjxn-py marked this pull request as draft January 20, 2025 14:19
@martinRenou
Copy link
Member

Neat!

I just tested it. I have two suggestions:

  • remove the slider labels (10% and 100%) if we can. It takes space and it's not giving much info
  • prevent the text input to go out of range (with a step=0.1 maybe)

@arjxn-py
Copy link
Member Author

prevent the text input to go out of range (with a step=0.1 maybe)

Yeah, this is done. Thanks

I'll remove the labels too

@arjxn-py
Copy link
Member Author

arjxn-py commented Jan 20, 2025

There's a small bug, slider doesn't change itself when i change input value after interacting with the slider -

slider.mov

@arjxn-py arjxn-py marked this pull request as ready for review January 21, 2025 08:46
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused by the 0.1 choice here? Why not the 0-1 range?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fundamentally we might want to avoid making a layer fully transparent

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I agree with this, but no hard feeling. We can discuss that in an issue after merging this PR :)

Copy link
Member

@martinRenou martinRenou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nitpick on the vertical alignment between slider and input, I wonder if we can fix it easily with CSS. If it's too tricky, let's not consider a blocker to merge the PR.

Screenshot From 2025-01-21 09-55-30

@arjxn-py
Copy link
Member Author

Small nitpick on the vertical alignment between slider and input, I wonder if we can fix it easily with CSS. If it's too tricky, let's not consider a blocker to merge the PR.

I'll try to align it and update :)

@arjxn-py
Copy link
Member Author

Also #365 (comment) this bug still persists :( we can maybe track this in a separate issue or would you have some tip in regard?

@martinRenou
Copy link
Member

I'm not able to reproduce the bug you see, do you have an error in the console when doing so?

@arjxn-py
Copy link
Member Author

I'm not able to reproduce the bug you see, do you have an error in the console when doing so?

Nope

@martinRenou
Copy link
Member

track this in a separate issue

I'm fine with this 👍🏽

@arjxn-py
Copy link
Member Author

I'm fine with this 👍🏽

opened #374 for this

Copy link
Member

@martinRenou martinRenou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@martinRenou martinRenou merged commit b95957a into geojupyter:main Jan 21, 2025
14 checks passed
@arjxn-py arjxn-py deleted the fix-slider branch March 16, 2025 13:06
HaudinFlorence pushed a commit to HaudinFlorence/jupytergis that referenced this pull request Jan 28, 2026
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants