Скачать или смотреть Create Custom Slider in 2 mins

Code: [https://github.com/RikamPalkar/Blazor...]

Learn Blazor from my book: Blazor Simplified: [https://www.amazon.in/dp/B0CBCKB32W?r...]

🌐 Explore more about me:
🔗 Personal Website: [https://rikampalkar.github.io]
🔗 LinkedIn: [  / rikampalkar  ]

Chapters:
00:00 - Introduction
00:32 - Code this stuff out
00:58 - CSS
01:35 - Parent component
Transcript:
Slider, sliding its way across the UI like a pro! But hey, haven't we all seen sliders before? You betcha! You're seeing one right here in this video. Let's jump into creating our own slider for Blazor!

Alright, folks, time to get our hands dirty. Let's whip up a new component and name it Slider.

We start simple, just add an input tag with the type set to range.

Now, let's add some spice to this slider soup. We'll need three properties: Min, Max, and the current Value of our slider.

Bind those babies to our input tag, and voila!
Let's give our slider some pizzazz with a height, width, and a touch of opacity. Let's crank up the opacity to 100% on hover.

Now, let's show those browser defaults who's boss! Say goodbye to appearance: none, and hello to a custom look for our slider.

Next, we have a gradient background that shifts from green to gray as our slider moves.

And hey, why keep that value a secret? Let's proudly display it on the UI for all to see!

Time to call in the big guns – our parent component. Just toss in our Slider instance, set the Min, Max, and initial Value.

Do notice how the value only updates when you let go of the thumb? Let's fix that with some on-the-fly updates using an input event.

And there you have it, folks! Creating a slider in Blazor is as easy as making a pie. See you in the next one, where we'll tackle something even juicier!

Thank you, ciao!