Blazor Range Slider - Range Limits

Range Slider / Limits

This sample demonstrates the rendering of the Blazor Range Slider component with Limits. Drag the thumb over the bar to select the values between the assigned limit values.

Loading Syncfusion Blazor Server Demos…

Properties
MinStart
MinEnd
MaxStart
MaxEnd
Lock First Handle
Lock Second Handle

The limits are used to limit the selection between certain range. When the limits are assigned, the draggable limited area will be in the dark shadow color of the current theme. The limits of APIs are explained below.

  • MinStart - Used to set the minimum limit value for the first handle.
  • MinEnd - Used to set the maximum limit value for the first handle.
  • MaxStart - Used to set the minimum limit value for the second handle.
  • MaxEnd - Used to set the maximum limit value for the second handle.
  • StartHandleFixed - Used to lock the first handle in the current position.
  • EndHandleFixed - Used to lock the second handle in the current position.

In this demo, limits with MinRange and Range Slider are demonstrated.

  • MinRange Slider – In this sample, the minimum and maximum limits of the slider are set to 10 and 40, respectively.
  • Range Slider – In this sample, the minimum and maximum limits of the first handle are set to 10 and 40, respectively, and the minimum and maximum limits of the second handle are set to 60 and 90, respectively.
Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE