Skip to content

Conversation

jasonpnp
Copy link

Slider
image

Range slider
image

Updated styling for the Slider and Range Slider components:

  • Made the both inputs (min + max) to have dynamic sizing based on the number of digits in the slider range
  • Min and max inputs will have the same size (aligned to the max size/range)
  • Centered the slider rail relative to the inputs when no tick marks are displayed

First PR in this repo so apologies if I'm going off script on how these should structured 😞

Contributor Checklist

  • I have broken down my PR scope into the following TODO tasks
    • Make slider and range slider input sizes dynamic
    • Visually center the slider rail relative to the inputs when the tick marks are not shown
  • I have run the tests locally and they passed. (refer to testing section in contributing)
  • I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

  • I have added entry in the CHANGELOG.md
  • If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
    • this GitHub #PR number updates the dash docs
    • here is the show and tell thread in Plotly Dash community

- Increase container gap from 12px to 16px
- Center align input text in range slider components
- Update package dependencies
@ndrezn
Copy link
Member

ndrezn commented Sep 24, 2025

YES @jasonpnp ! Thank you for contributing to Dash!

@gvwilson gvwilson added feature something new P1 needed for current cycle labels Sep 25, 2025
@T4rk1n
Copy link
Contributor

T4rk1n commented Sep 29, 2025

Need to target the v4 branch.

@jasonpnp jasonpnp changed the base branch from dev to v4 September 29, 2025 16:03
@KoolADE85
Copy link
Contributor

@jasonpnp is there a particular reason you added fallback values to various CSS rules?
dcc.css defines these CSS variables, so they are meant to always be available.
And if the fallback values were to ever apply, that means a significant bug is being glossed over that would affect custom themes and DDK.
So I'd rather just remove the fallback so we see obvious visual bugs, should they ever occur.

@jasonpnp
Copy link
Author

@KoolADE85 I added fallback values because I was getting build errors. Investigating with the LLM it deduced the build errors were from not having fallbacks so I took it's word. Adding them appeared to resolve the errors 🤷

@KoolADE85
Copy link
Contributor

@KoolADE85 I added fallback values because I was getting build errors. Investigating with the LLM it deduced the build errors were from not having fallbacks so I took it's word. Adding them appeared to resolve the errors 🤷

hmm, I don't see any build errors when I remove them - do you recall what the error was? I'm wondering if it was just a hallucinated fix.
Or maybe even related to the build errors we encountered the other day 🤔

@jasonpnp
Copy link
Author

If the build errors are gone even without them maybe it was something else? That was the only reason I added them

@KoolADE85 KoolADE85 merged commit bd7ab02 into v4 Oct 3, 2025
9 checks passed
@KoolADE85 KoolADE85 deleted the v4-styling branch October 3, 2025 15:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new P1 needed for current cycle
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants