Slider

<dui-slider value="50" max="100"/>

Usage

The dui-slider Tag Helper renders a slider for selecting a value from within a range. It is backed by a small del-slider web component that handles pointer dragging, keyboard interaction, and clicking the track to seek, while the value is posted back through hidden inputs so it model-binds like any other form field.

Use the min, max, and step attributes to control the range and the increment the slider snaps to.

<dui-slider value="50" min="0" max="100"/>

Examples

Range

Supply a comma-separated list of values to render multiple thumbs. With two values the slider acts as a range slider. Use the min-distance attribute to enforce a minimum gap between adjacent thumbs.

<dui-slider value="20,80" min="0" max="100" min-distance="10"/>

Multiple thumbs

The slider is not limited to two thumbs — provide as many values as you need and a thumb is rendered for each.

<dui-slider value="25,50,75" min="0" max="100" min-distance="5"/>

Model binding

The dui-slider Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. Bind it to an int for a single-thumb slider, or to an int[] (or List<int>) for a range slider — the posted values bind straight back to the collection.

When using model binding, DuneUI will automatically wrap the slider inside a Field with the correct label and description derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.

<dui-slider asp-for="MaximumDistanceFromCenter" max="100"/>
<dui-slider asp-for="PricePerNight" min="0" max="1000" step="50"/>
<dui-slider asp-for="GuestRatingBands" min="0" max="100" min-distance="5"/>

public class ModelBindingModel
{
    [Display(
        Name = "Maximum distance from center",
        Description = "Only show stays within this many km of the city center."
    )]
    public int MaximumDistanceFromCenter { get; set; } = 40;

    [Display(Name = "Price per night", Description = "Filter stays to a nightly price range.")]
    public int[] PricePerNight { get; set; } = [200, 800];

    [Display(
        Name = "Guest rating bands",
        Description = "Boundaries for the low, medium, and high guest-rating bands."
    )]
    public int[] GuestRatingBands { get; set; } = [25, 50, 75];
}

Steps

Use the step attribute to control the increment the slider snaps to as it moves.

<dui-slider value="40" min="0" max="100" step="10"/>

Vertical

Set the orientation attribute to SliderOrientation.Vertical to lay the slider out vertically. It defaults to SliderOrientation.Horizontal.

<dui-slider value="50" orientation="SliderOrientation.Vertical"/>
<dui-slider value="20,80" min="0" max="100" orientation="SliderOrientation.Vertical"/>

Disabled

Add the disabled attribute to prevent the user from interacting with the slider.

<dui-slider value="50" max="100" disabled="true"/>