| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
June 15, 2022 11:39 AM |
145 |
43 |
13 |
8️⃣ / 5️⃣0️⃣The Ultimate JavaScript Projects Series!
🎉Border with slider (A part of the SASS project)
A Thread🧵↓ pic.twitter.com/nevXZZVa5s
👀 Someone said to me, Hey Ajay this is the ultimate project?
😊 So I think you are also thinking that what a nonsense project.
💡 But I want to say to you that I have divided a huge SASS project into multiple parts.
😍And I will build them one by one and finally combine and💥
📌 So this is the HTML code for the project.
◈ There are 2 elements in this container that are a div element and a range slider.
◈ In range slider:
- min = 0 (px)
- max = 25 (px)
- value = 0 (Initial value for the thumb) pic.twitter.com/fdXl70LfF1
📌 In the CSS code, I have set 0px as the border of this div element.
◈ And just we have to change this value using JavaScript. pic.twitter.com/Oqc9LLTsnf
📌 In the JavaScript part, We have to select all required HTML elements.
◈ Like, as a div element and a range input element. pic.twitter.com/LRHul5QtD8
◈ Then we have to collect the value from the range input element.
◈ After getting the value, we have to concatenate it with the "px" unit.
◈ rangeSlider.value returns the value from the range input element and then concatenates it with the "px" unit. pic.twitter.com/SVyaKK5ETj
◈ And finally, once we got the value from the input element assigned it as the value of the border-width property.
⛔ I've already discussed the "input" event in the previous threads don't forget to check it out. pic.twitter.com/OuJg4V5ls4
🔔 One more thing, if you want to learn the awesome projects from this series then you should follow this Github repository.
Don't forget to give a star ⭐ to this repository, also if you didn't follow me on GitHub then consider following me.
Try it from here:)
That's all for now, we will meet in the next thread!
But if you like make sure to:
-
Follow me @ATechAjay
-
Retweet the first tweet.
-
Turn on the notification to never miss these amazing tweets.
Thank you so much for staying to the end of this thread.