DuneUI

<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"/>

The slider only submits a value when you set asp-for or name. Just like a native input without a name, a slider with only a value (such as the examples on this page) renders and is fully interactive but posts nothing. Use asp-for to model bind, or set name to post a value without binding.

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"/>

Thumb alignment

Use the thumb-alignment attribute to control how the thumb sits relative to its value. It defaults to SliderThumbAlignment.Edge, which keeps the thumb fully within the track at the extremes so it never overhangs the ends. Set it to SliderThumbAlignment.Center to center the thumb on its value instead, letting it extend past the track at the minimum and maximum.

<div class="flex flex-col gap-2">
    <dui-label>Edge (default) — thumb stays within the track</dui-label>
    <dui-slider value="0"/>
</div>
<div class="flex flex-col gap-2">
    <dui-label>Center — thumb overhangs the ends</dui-label>
    <dui-slider value="0" thumb-alignment="SliderThumbAlignment.Center"/>
</div>

Disabled

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

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

API Reference

`<dui-slider>`

The <dui-slider> tag helper renders a <del-slider> web component containing the track, a thumb per value, and a hidden <input> per thumb that posts the value. In addition to the attributes below, it forwards any global HTML attributes to the rendered element.

Prop

Type

Slider

On this page