Blazor Range Slider - Custom Bar
This sample demonstrates the customization of the Blazor Range Slider selection bar. Drag the thumb over the bar to select the values between Min and Max.
In this demo, customization of a track using CSS is demonstrated.
- Height - In this sample, the track height has been customized. Here, the thumb has to be adjusted based on the track height.
- Gradient color - In this sample, the track has been customized with a gradient color.
- Dynamic thumb and selection bar color - In this sample, the track and thumb have been customized to different colors for different intervals by using the ValueChange event.
- Range Slider track - In this sample, the
Start,End, andColorvalues for different track segments are defined using theColorRangechild elements within the SliderColorRanges tag of the Range Slider component.