Slider
An input where the user selects a value, or range of values, from a given range
<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 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.
<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.
<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 a number, such as an int or a double, for a single-thumb slider, or to a collection of numbers, such as an int[] or a 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 wrap-in-field attribute to false.
<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"/>Value
Add <sa-slider-value/> to show the slider's current value. Inside a field it shows the value of that field's slider, so you can place it wherever the design needs it, such as beside the label or within the description. The value updates as the thumb moves. A range slider shows its values separated by a dash; set index to show a single thumb's value.
Use value-format to format each value, with {0} standing for the number, such as ${0} or {0} km. Numbers are formatted in the current culture, with up to as many decimals as min and step have. Use thumb-labels to give each thumb of a range slider its own accessible name; a name can't contain a comma.
<sa-field>
<div class="flex items-center justify-between gap-2">
<sa-field-label asp-for="PricePerNight"/>
<sa-slider-value/>
</div>
<sa-slider asp-for="PricePerNight" max="1000" step="50" value-format="${0}"
thumb-labels="Minimum price,Maximum price"/>
<sa-field-description asp-for="PricePerNight"/>
</sa-field>
<sa-field>
<sa-field-label asp-for="MaximumDistanceFromCenter"/>
<sa-slider asp-for="MaximumDistanceFromCenter" max="50" value-format="{0} km"/>
<sa-field-description>
Stays within <sa-slider-value/> of the city center.
</sa-field-description>
</sa-field>Marks
Add <sa-slider-marks> inside the slider to draw marks along the track. It generates a mark every interval, which defaults to the slider's step, plus one at the maximum. Set labels to SliderMarkLabels.Ends to label the minimum and maximum, or SliderMarkLabels.All to label every mark; labels use the slider's value-format. Set show-ticks="false" to show only the labels. Marks between the thumbs are styled as in range.
<sa-slider value="200,800" max="1000" step="50" value-format="${0}">
<sa-slider-marks interval="250" labels="SliderMarkLabels.Ends"/>
</sa-slider>
<sa-slider value="4" min="1" max="8">
<sa-slider-marks labels="SliderMarkLabels.All"/>
</sa-slider>
<sa-slider value="40" max="100" value-format="{0} km">
<sa-slider-marks labels="SliderMarkLabels.Ends" show-ticks="false"/>
</sa-slider>Custom marks
Place <sa-slider-mark> elements inside <sa-slider-marks> to choose the marks yourself. Each mark's content becomes its label, and a mark without content draws only a tick. Outside a field, give the slider an id and point <sa-slider-value> at it with for.
<sa-slider id="minimum-guest-rating" value="4" min="1" max="5">
<sa-slider-marks>
<sa-slider-mark value="1">Poor</sa-slider-mark>
<sa-slider-mark value="3">Good</sa-slider-mark>
<sa-slider-mark value="5">Excellent</sa-slider-mark>
</sa-slider-marks>
</sa-slider>
<p class="text-sm">
Showing stays rated <sa-slider-value for="minimum-guest-rating"/> stars or higher.
</p>Steps
Use the step attribute to control the increment the slider snaps to as it moves.
<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.
<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.
<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.
<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. With value-format set, each thumb also renders aria-valuetext, so screen readers announce the formatted value. Thumbs are named by the field label; thumb-labels gives each thumb of a range slider its own name instead. <sa-slider-value> renders an <output> with aria-live="off", because the focused thumb already announces each change, and the marks are hidden from assistive technology. 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.UI 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.
@{
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 element that holds the track and thumbs. |
Track | The full slider track. |
Range | The filled portion of the track. |
Thumb | Every slider thumb, including both thumbs of a range slider. |
Marks | The container that holds the marks. |
Mark | Every mark. |
MarkLabel | Every mark label. |
Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with wrap-in-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. Style <sa-slider-value> with its own class attribute.
API Reference
<sa-slider>
Renders a web component containing the track, a thumb per value, and a hidden <input> per thumb that posts the value.
Prop
Type
<sa-slider-value>
Renders an <output> that shows the current value of a slider and updates as it moves.
Prop
Type
<sa-slider-marks>
Renders the marks along a slider. Place it inside <sa-slider>. It contains <sa-slider-mark> elements, or generates marks when it has none.
Prop
Type
<sa-slider-mark>
Renders a mark at one value. Place it inside <sa-slider-marks>. Its content becomes the mark's label.
Prop
Type