# Slider
**Also known as:** Range
## Description
BitSlider turns a number into a distance you can point at: drag the thumb, press the rail to send it there, or step it with the keyboard, and watch the fill follow. Give it two thumbs and it selects a range instead, with a minimum and a maximum distance to keep them apart, an option to stop them crossing, another to let one push the other along, and one more that makes the band between them a handle you can slide the whole range by. The fill does not have to start at the near end - attach it to zero, to any origin you like, invert it so that it highlights what lies beyond the value, or drop it altogether when the value is a position rather than a quantity. Marks can be drawn at every step or at values you choose, with labels under them, and can be made the only values the user is allowed to land on. A floating label can ride along with the thumb, on hover or always, carrying your own markup if plain text is not enough. It runs horizontally or vertically, takes any theme color and three sizes, and - because it is built on native range inputs - it comes with the whole slider keyboard, touch dragging, form submission and EditForm validation already working, with the larger Page and Shift jumps pinned to a distance you name rather than left to the browser.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaValueText | `Func<double, string>?` | null | A text description of the Slider number value for the benefit of screen readers. This should be used when the Slider number value is not accurately represented by a number. The returned text becomes the aria-valuetext of every thumb. |
| AutoFocus | `bool` | false | If true, the slider automatically receives focus when the page renders. |
| Classes | `BitSliderClassStyles?` | null | Custom CSS classes for different parts of the BitSlider. |
| Color | `BitColor?` | null | The general color of the slider, applied to the filled part of the track and to the thumbs. |
| DefaultLowerValue | `double?` | null | The default lower value of the ranged Slider, used when LowerValue is not bound. |
| DefaultUpperValue | `double?` | null | The default upper value of the ranged Slider, used when UpperValue is not bound. |
| DefaultValue | `double` | 0 | The default value of the Slider, used when Value is not bound. |
| DraggableTrack | `bool` | false | Lets the filled band between the two thumbs of a ranged Slider be dragged bodily, so the whole range travels at once and keeps the width it had. Only the rail strictly between the thumbs takes the drag, so the thumbs themselves stay grabbable. |
| GetValueText | `Func<double, string>?` | null | Builds the text of every label the Slider draws from the value it stands for. Takes precedence over ValueFormat, and is what AriaValueText falls back to. |
| Inverted | `bool` | false | Fills the track from the far end instead of from the near one. A ranged slider inverts into the two outer segments, leaving the span between the thumbs unfilled. |
| IsOriginFromZero | `bool` | false | Attaches the origin of the filled part of the track to zero. Shorthand for setting Origin to 0. |
| IsRanged | `bool` | false | If ranged is true, display two thumbs that allow the lower and upper bounds of a range to be selected. |
| IsVertical | `bool` | false | Whether to render the slider vertically. Its length comes from the --bit-sld-length CSS variable, which defaults to 12rem. |
| Label | `string?` | null | Description label of the Slider, which also names it for assistive technologies when no AriaLabel is given. |
| LabelTemplate | `RenderFragment?` | null | Replaces the plain text Label of the Slider with custom content. |
| LargeStep | `double?` | null | The distance the larger keyboard jumps cover: Page Up and Page Down, and an arrow key held with Shift. It defaults to whatever the browser does on its own. |
| LowerAriaLabel | `string?` | null | The accessible name of the lower thumb of a ranged slider. |
| LowerValue | `double` | 0 | The lower value of the ranged Slider. |
| Marks | `IEnumerable<BitSliderMark>?` | null | The marks drawn along the track of the Slider, each optionally carrying a label. Takes precedence over ShowMarks. |
| MarkStep | `double?` | null | The interval between the marks generated by ShowMarks. Defaults to the Step. |
| MaxRange | `double?` | null | The largest distance the two thumbs of a ranged slider are allowed to be apart. |
| MinRange | `double` | 0 | The smallest distance the two thumbs of a ranged slider are allowed to be apart. Any value above zero also stops the thumbs from crossing. |
| Min | `double` | 0 | The min value of the Slider. |
| Max | `double` | 10 | The max value of the Slider. |
| Name | `string?` | null | The name of the underlying range input, which is what makes the value readable by a plain form post. |
| NoFill | `bool` | false | Leaves the track unfilled, so the slider is a bare rail with a thumb on it rather than a bar that grows. It also turns off the highlighting of the marks the fill would otherwise have reached. |
| NoSwap | `bool` | false | Stops the two thumbs of a ranged slider from crossing over each other. |
| OnChange | `EventCallback<double>` | | Callback when the value of a single-value Slider changes. This is called on every individual step. |
| OnChangeEnd | `EventCallback<double>` | | Callback for when the interaction that changes the value ends, rather than on every step along the way. |
| OnFocusIn | `EventCallback<FocusEventArgs>` | | Callback for when a thumb of the Slider receives the focus. |
| OnFocusOut | `EventCallback<FocusEventArgs>` | | Callback for when a thumb of the Slider loses the focus. |
| OnRangeChange | `EventCallback<BitSliderRangeValue>` | | Callback when the range of a ranged Slider changes. This is called on every individual step. |
| OnRangeChangeEnd | `EventCallback<BitSliderRangeValue>` | | Callback for when the interaction that changes the range ends, rather than on every step along the way. |
| Origin | `double?` | null | The value the filled part of the track grows out of, instead of the near end of the track. Has no effect on a ranged slider. |
| Pushable | `bool` | false | Lets a thumb of a ranged slider push the other one along instead of stopping against it. It has nothing to do without a MinRange to keep or a NoSwap ordering to hold, and it keeps the thumbs on their own sides since pushing and crossing are opposites. |
| RangeValue | `BitSliderRangeValue?` | null | The range value of the Slider. Use this parameter to get or set both the LowerValue and the UpperValue at once. |
| ReadOnly | `bool` | false | Makes the Slider read-only: still focusable and announced, but refusing every change. |
| Required | `bool` | false | Marks the Slider as required, which is announced through aria-required. |
| RestrictToMarks | `bool` | false | Restricts the values the user can pick to the marks alone, so the thumb jumps from one mark to the next instead of moving by the Step in between them. |
| ShowMarks | `bool` | false | Draws a mark at every MarkStep (or every Step when that is not set) along the track. |
| ShowMarkLabels | `bool` | false | Labels the generated marks of ShowMarks with their own values. |
| ShowValue | `bool` | true | Whether to show the value beside the Slider. |
| Size | `BitSize?` | null | Size of the Slider, which scales its track, thumbs and labels together. |
| SliderBoxHtmlAttributes | `Dictionary<string, object>?` | null | Additional html attributes for the Slider box, the element the track and the inputs are laid inside of. |
| Step | `double` | 1 | The difference between the two adjacent values of the Slider. Values of zero or below fall back to 1. |
| Styles | `BitSliderClassStyles?` | null | Custom CSS styles for different parts of the BitSlider. |
| ThumbLabel | `BitSliderThumbLabel?` | null | Decides when the floating label that rides along with the thumb is shown. |
| ThumbLabelTemplate | `RenderFragment<double>?` | null | Replaces the text of the floating label that rides along with the thumb with custom content, built from the value that thumb stands for. |
| UpperAriaLabel | `string?` | null | The accessible name of the upper thumb of a ranged slider. |
| UpperValue | `double` | 0 | The upper value of the ranged Slider. |
| Value | `double` | 0 | The value of the Slider. |
| ValueFormat | `string?` | null | Custom format for the displayed value of the Slider, applied to the value labels, the mark labels and the floating thumb labels alike. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitSliderThumbLabel Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Off | 0 | Never show the floating label. |
| Auto | 1 | Show the floating label only while the slider is being hovered, dragged or focused. |
| On | 2 | Always show the floating label. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitSliderClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the BitSlider's root element. |
| Label | `string?` | null | Custom CSS classes/styles for the BitSlider's label. |
| Container | `string?` | null | Custom CSS classes/styles for the BitSlider's container. |
| SliderBox | `string?` | null | Custom CSS classes/styles for the BitSlider's box, the element the track and the inputs are laid inside of. |
| Track | `string?` | null | Custom CSS classes/styles for the BitSlider's track, the full-length rail the thumb travels along. |
| Fill | `string?` | null | Custom CSS classes/styles for the BitSlider's fill, the highlighted part of the track. |
| Thumb | `string?` | null | Custom CSS classes/styles for the BitSlider's thumbs, the handles that travel along the track. |
| LowerThumb | `string?` | null | Custom CSS classes/styles for the lower thumb of a ranged BitSlider, added on top of Thumb. |
| UpperThumb | `string?` | null | Custom CSS classes/styles for the upper thumb of a ranged BitSlider, added on top of Thumb. |
| LowerValueInput | `string?` | null | Custom CSS classes/styles for the BitSlider's lower value input. |
| UpperValueInput | `string?` | null | Custom CSS classes/styles for the BitSlider's upper value input. |
| ValueInput | `string?` | null | Custom CSS classes/styles for the BitSlider's value input. |
| TrackInput | `string?` | null | Custom CSS classes/styles for the input that makes the filled band of a ranged BitSlider draggable, which is only rendered while DraggableTrack asks for it. |
| OriginFromZero | `string?` | null | Custom CSS classes/styles for the BitSlider's origin tick. |
| ValueLabel | `string?` | null | Custom CSS classes/styles for the BitSlider's value label. |
| LowerValueLabel | `string?` | null | Custom CSS classes/styles for the BitSlider's lower value label. |
| UpperValueLabel | `string?` | null | Custom CSS classes/styles for the BitSlider's upper value label. |
| Mark | `string?` | null | Custom CSS classes/styles for the BitSlider's mark ticks. |
| MarkLabel | `string?` | null | Custom CSS classes/styles for the BitSlider's mark labels. |
| ThumbLabel | `string?` | null | Custom CSS classes/styles for the BitSlider's floating thumb labels. |
### BitSliderRangeValue Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Lower | `double` | 0 | The lower value of the ranged Slider. |
| Upper | `double` | 0 | The upper value of the ranged Slider. |
| Length | `double` | 0 | The distance between the two ends of the range. |
### BitSliderMark Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Value | `double` | 0 | The value the mark sits at. A mark outside the Min..Max range of the slider is not rendered. |
| Label | `string?` | null | The text rendered under the mark. A mark without a label is drawn as a plain tick. |
| Class | `string?` | null | Custom CSS classes for this mark, added to both its tick and its label. |
| Style | `string?` | null | Custom CSS styles for this mark, added to both its tick and its label. |
## Examples
\n**Basic**:
```razor
From @ageBand.Lower to @ageBand.Upper (@ageBand.Length years wide)
Value: @storageValue GB
qualityMarks =
[
new(0, "Draft"),
new(1, "Low"),
new(2, "Medium"),
new(3, "High"),
new(4, "Lossless")
];
private readonly List storageMarks =
[
new(0, "0"),
new(64, "64"),
new(128, "128"),
new(256, "256"),
new(512, "512"),
new(1000, "1 TB"),
new(2000, "2 TB")
];
private double storageValue = 256;
```
\n**Vertical**:
```razor
```
```csharp
private static string GetVolumeIcon(double value) => value switch
{
<= 0 => BitIconName.VolumeDisabled,
< 34 => BitIconName.Volume1,
< 67 => BitIconName.Volume2,
_ => BitIconName.Volume3
};
```
\n**Range constraints**:
```razor
@freeRange.Lower - @freeRange.Upper
@pushableRange.Lower - @pushableRange.Upper (@pushableRange.Length wide)
@draggableRange.Lower - @draggableRange.Upper (@draggableRange.Length wide)
```
```csharp
private static string GetTimeText(double minutes)
{
return TimeSpan.FromMinutes(minutes).ToString(@"hh\:mm", CultureInfo.InvariantCulture);
}
```
\n**Binding**:
```razor
LowerValue: @boundLower UpperValue: @boundUpper
```
```csharp
private double oneWayBinding = 3;
private double twoWayBinding = 5;
private double boundLower = 25;
private double boundUpper = 75;
```
\n**Events**:
```razor
OnChange fired @onChangeCount times · OnChangeEnd committed @onChangeEndValue
OnRangeChange fired @onRangeChangeCount times ·
OnRangeChangeEnd committed @onRangeChangeEndValue?.Lower - @onRangeChangeEndValue?.Upper
The slider is @focusState
```
```csharp
private int onChangeCount;
private double? onChangeEndValue;
private int onRangeChangeCount;
private BitSliderRangeValue? onRangeChangeEndValue;
private const string focusedText = "focused";
private const string blurredText = "blurred";
private string focusState = blurredText;
```
\n**Validation**:
```razor
@if (string.IsNullOrEmpty(SuccessMessage))
{
Submit
}
else
{
@SuccessMessage
}
```
```csharp
public class BitSliderDemoFormModel
{
[Range(typeof(double), "4", "7", ErrorMessage = "Pick at least {1} days a week")]
public double Days { get; set; }
[MinimumRangeLength(20, ErrorMessage = "Cover a span of at least 20")]
public BitSliderRangeValue? Budget { get; set; } = new(40, 50);
}
[AttributeUsage(AttributeTargets.Property)]
public sealed class MinimumRangeLengthAttribute(double minimum) : ValidationAttribute
{
public override bool IsValid(object? value)
{
return value is BitSliderRangeValue range && range.Length >= minimum;
}
}
public BitSliderDemoFormModel ValidationModel = new();
public string? SuccessMessage;
private async Task HandleValidSubmit()
{
SuccessMessage = "Form Submitted Successfully!";
await Task.Delay(2000);
SuccessMessage = string.Empty;
ValidationModel.Days = default;
ValidationModel.Budget = new(40, 50);
StateHasChanged();
}
private void HandleInvalidSubmit()
{
SuccessMessage = string.Empty;
}
```
\n**Accessibility**:
```razor
Focus the lower thumb
Focus the upper thumb
```
```csharp
private BitSlider? focusableSlider;
private static readonly string[] qualityWords = ["Draft", "Low", "Medium", "High", "Lossless"];
private static string GetQualityText(double value)
{
var index = (int)Math.Clamp(value, 0, qualityWords.Length - 1);
return qualityWords[index];
}
```
\n**Color**:
```razor