Skip to content
SLIDERS AND RATING · FREE

RangeSlider

Choose a lower and an upper value with one control.

Choose a lower and an upper value with one control. Both thumbs are native range inputs, so they behave the way browsers and assistive technology expect.

Why it helps

  • Two values, one control
  • Native range inputs
  • Marks supported

Where it fits

  • Price filters
  • Date or age ranges
  • Score limits
RangeSlider control in a RayCraft page

Example

<RangeSlider @bind-Low="_low" @bind-High="_high" Label="Price range" Min="0" Max="1000" Step="10" />
<span>From @_low to @_high</span>

@code {
    private double _low = 200;
    private double _high = 700;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation