Submitted over 1 year ago

Interactive Pricing Component

Taylor H.•280

@tahobbit11

Preview site View code

This is a solution for...Interactive pricing component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

I did everything else that was working for me, but for some reason, when trying to style the input range, nothing I did seemed to work at all. I looked up the various different things that targeted these elements like:

input[type=”range”]::-webkit-slider-thumb input[type=”range”]::-moz-range-thumb input[type=”range”]::-ms-thumb

input[type=”range”]::-webkit-slider-runnable-track input[type=”range”]::-moz-range-track input[type=”range”]::-ms-track

However, nothing I did seemed to change those elements. If I could get some help, that would be wonderful. Thanks

Community feedback

Roberto Ramirez•1,350
@Robertron624Posted over 1 year ago
Hi Taylor,

I was also having problems styling the input range element, the trick is to hide it and using pseudolements to style it, this article really helped me to achieve that:

Creating a custom CSS range slider with JavaScript upgrades

you can also check this one out:

Styling range input with CSS and JavaScript for better UX
Marked as helpful
0

Please log in to post a comment

Join 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