Range Slider

A basic RangeSlider bound to a range value tuple with @bind-Value. The component renders two draggable thumbs on a shared track, allowing users to define a start and end value. The current range is displayed below.

Set ShowTooltips to true to display value labels above each thumb on hover and during drag. Tooltips provide immediate visual feedback of the exact value at each thumb position, which is especially helpful for large ranges.

Enable ShowTickMarks and provide custom TickValues to display visual markers at specific positions along the track. Tick marks help users identify common breakpoints and make it easier to select precise values at those positions.

Use Min, Max, and Step to define the value boundaries and increment size. Here the range spans 0 to 1000 with a step of 50, ideal for budget filters or quantity ranges where coarse granularity is appropriate.

Set MinRange to enforce a minimum gap between the two thumbs. This prevents the start and end values from getting too close together. In this example, a minimum range of 20 ensures there is always at least a 20-unit difference between the selected values.

Use FormatValueFunc to customize how tooltip values are displayed. Here it formats values as currency, making the slider suitable for price filter interfaces. Combined with ShowTooltips, this provides clear monetary context at each thumb position.

Set Disabled to true to prevent all user interaction. Both thumbs become non-interactive with reduced opacity and a not-allowed cursor. The thumbs cannot be dragged, keyboard events are ignored, and aria-disabled is set for screen readers.

A real-world product filter pattern using a RangeSlider with price formatting inside a bordered container. This layout is common in e-commerce filter sidebars where users narrow results by price range, providing immediate visual feedback of the selected boundaries.