Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
HTML5 Input range styling
See original GitHub issueIt seems that autoprefixer could help here.
When styling HTML5 range input we have various pseudo selectors:
::-webkit-slider-thumb
::-moz-range-thumb
::-moz-range-track
I haven’t done the careful research about how to maximize compatibility etc. and other possible selectors, but just wanted to first get this out and see if there’s something to be done or not.
Issue Analytics
- State:
- Created 9 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Creating A Custom Range Input That Looks Consistent Across ...
To demonstrate why we even need a tutorial on styling range inputs in the first place, we'll take a look at some screenshots...
Read more >Styling Cross-Browser Compatible Range Inputs with CSS
This gives us invisible or unstyled range inputs in all browsers. Now we can apply our custom styles. Styling the Thumb. The widget...
Read more >Style Input Range - CSS Portal
This is a handy generator that will help you style the html input range tag. You will be able to style all aspects...
Read more >Styling range input with CSS and JavaScript for better UX
A complete guide to style range input with CSS and JavaScript to make your UI consistent, more usable and visually appealing.
Read more >How to Style Input Type Range in Chrome, Firefox, and IE
The new HTML5 range input gives you a nifty slider UI component. But of course it looks ... Don't worry, you can style...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
postcss-input-rangedoes the trick.It looks like the plugin fabb linked doesn’t output any unprefixed code in the final CSS.
It seems to introduce it’s own syntax and split it into the various browser specific prefixes. It removes it’s proprietary CSS from the output.
FYI, this is a good thing. It means that the pseudo selectors fabb used could still be turned into a real W3C spec one day.