-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
V4.1: Custom range control #23380
V4.1: Custom range control #23380
Conversation
Please see my PR #19468, I'm sure you can take the styles for Firefox and Chrome for the equivalent of ::-ms-fill-lower |
@wolfy1339 i tried to make the element look the same accros browsers, that's why in didn't add styling for the progress like you did |
scss/_custom-forms.scss
Outdated
} | ||
} | ||
|
||
&::-moz-focus-inner, &:-moz-focusring { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we have one rule per line so try updating your patch.
scss/_custom-forms.scss
Outdated
&:active { | ||
|
||
&::-webkit-slider-thumb, | ||
&::-moz-range-thumb, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line contains trailing whitespace
scss/_custom-forms.scss
Outdated
|
||
&:active { | ||
|
||
&::-webkit-slider-thumb, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line contains trailing whitespace
scss/_custom-forms.scss
Outdated
} | ||
} | ||
|
||
&::-moz-focus-inner, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line contains trailing whitespace
scss/_custom-forms.scss
Outdated
outline: none; | ||
|
||
&::-webkit-slider-thumb, | ||
&::-moz-range-thumb, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line contains trailing whitespace
scss/_custom-forms.scss
Outdated
&:focus { | ||
outline: none; | ||
|
||
&::-webkit-slider-thumb, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Line contains trailing whitespace
scss/_custom-forms.scss
Outdated
background-color: $custom-control-indicator-checked-bg; | ||
border: 0; | ||
border-radius: $custom-control-indicator-size; | ||
-webkit-appearance: none; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe this should be unprefixed and let autoprefixer do its thing. The same goes for other prefixes.
@XhmikosR fixed it all :) |
Conflicts resolved and a few more issues being tackled in #25600. Thanks for this, picking it up there. |
This pr adds styling to the range input type conform the BS custom control styling
i would like for people on windows to check this codepen: https://codepen.io/gijsbotje/pen/zddJXL
i've tried my best to get it uniform across browsers but i can't really test windows that good
hope you like it :)