Design comparison
Community feedback
- @VictorKevzPosted 5 months ago
Great job completing this challenge, for me as funny as it may sound, I had trouble with that little heading 😅 which caused me to miss the alignment with the design. I see you didn't manage to customize your slider, I hope you find this code helpful. Otherwise, your solution looks great!👍🏽
.slider { width: 100%; height: 8px; position: relative; appearance: none; background: var(--light-grayish-blue-slider); border-radius: .5rem; cursor: pointer; transition: all 0.3s ease; }
.slider::-webkit-slider-thumb { appearance: none; background-image: url("../../assets/images/icon-slider.svg"); background-color: var(--strong-cyan); background-repeat: no-repeat; background-position: center; border-radius: 50%; transition: all .3s ease-in-out; width: 40px; height: 40px; box-shadow: 0 1.6rem 3.2rem hsl(174, 97%, 48%); cursor: pointer; }
Marked as helpful0@mkborisPosted 4 months agoYea the custom slider was causing me lots of headache to get it right lol, I plan on tackling it some other time, I already spent too much time on it. Thanks for the 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