Range Slider / Customization / Thumb

Blazor Range Slider - Custom Thumb

Square

Circle

Oval

Custom image

This sample demonstrates the customization of the Blazor Range Slider thumb. Drag the thumb over the bar to select values between Min and Max.

In this demo, customization of the thumb by changing CSS is demonstrated through the following shapes:

Square - The thumb has been customized into a square shape.
Circle - The thumb has been customized into a circular shape.
Oval - The thumb has been customized into an oval shape.
Custom Image - The thumb has been replaced with a custom image for unique visual representation.