StellarAdmin

Theme

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

Usage

<sa-slider> renders a slider for selecting a value from within a range. It is backed by a small sel-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.

<sa-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.

Theme

<sa-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.

Theme

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

Model binding

Supports ASP.NET Core model binding via asp-for. 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, StellarAdmin 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.

Theme

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

Steps

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

Theme

<sa-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.

Theme

<sa-slider value="50" orientation="SliderOrientation.Vertical"/>
<sa-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.

Theme

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

Disabled

Set disabled="true" to prevent the user from interacting with the slider.

Theme

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

Accessibility

Each thumb renders with role="slider" and aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation, and aria-valuenow is updated as the value changes. A thumb is focused with Tab. Left and Down arrows decrease the value by one step, Right and Up arrows increase it, Page Down and Page Up move ten steps, and Home and End jump to the minimum and maximum. The value is posted through hidden inputs, so the slider takes part in forms without extra work.

Part classes

Pass a SliderClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-slider> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.

Theme

@{
    var partClasses = new SliderClassNames
    {
        Root = "travel-field",
        Label = "travel-label",
        Description = "travel-help",
        Control = "travel-slider-control",
        Track = "travel-slider-track",
        Range = "travel-slider-range",
        Thumb = "travel-slider-thumb",
    };
}

<sa-slider id="classes-budget" label="Nightly budget" description="Adjust your budget in dollars." value="150" min="50" max="500" step="10" class-names="@partClasses" />

Property	Target
`Root`	The generated field wrapper, when the input renders an implicit field.
`Label`	The generated field label, when rendered.
`Description`	The generated help text, when rendered.
`Error`	The generated validation message element, when rendered.
`Content`	The generated container around the label and supporting text in a horizontal implicit field.
`Control`	The `<sel-slider>` container.
`Track`	The full slider track.
`Range`	The filled portion of the track.
`Thumb`	Every slider thumb, including both thumbs of a range slider.

Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.

The slider has no Input part option. Use Track, Range, and Thumb to style its visible controls.

API Reference

`<sa-slider>`

Renders a <sel-slider> web component containing the track, a thumb per value, and a hidden <input> per thumb that posts the value.

Prop

Type

Slider

On this page