Design comparison
SolutionDesign
Solution retrospective
Any suggestions would be great
Community feedback
- @GauravkumarioPosted about 3 years ago
can you tell me how you designed range input ?
Marked as helpful0@arshGoyalDevPosted about 3 years ago@Gauravkumario
- I have set the appearance to none of the input tag (for chrome) and the background to transparent.
- Used the pseudo elements ::-webkit-slider-thumb and ::-moz-range-thumb for chrome and firefox respectively to style the thumb.
- Created a div (for complete track) and span (for the slided part ) and styled the track of the input.
- And increased the width of the span as the value of input increases with javascript.
If you have more doubts you can check the source code on my github profile. Thanks for your feedback.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord