Skip to content
BlazorUI

Inputs

Slider

Bit.BlazorUIRange

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.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Left unbound like the first one below, the slider keeps its own state with no binding or event handler involved, and DefaultValue only picks where that state starts. Min and Max set the scale - 0 to 10 unless you say otherwise - and Step is the distance between two values the user can land on, which is what turns a continuous slider into one that snaps. Disabling it greys the whole control out and takes it out of the tab order, while ReadOnly keeps it at full contrast and in the tab order but refuses every change: the value is still there to be read and announced, just not to be moved. Notice the last one still shows and announces its value even though no drag, press or key can reach a different one.
The thumb answers the pointer three ways: drag it, press the rail anywhere to send it there and carry straight on dragging, or step it with the keyboard. A move that arrives in one jump - a press on the rail, a key, a value changed somewhere else on the page - is eased into rather than teleported to, while a thumb held under the pointer follows it exactly, since a thumb that lags behind the finger dragging it is worse than one that never eases at all.

Basic:
0

DefaultValue:
7

Min, Max and Step (a snapping slider):
40

Disabled:
5

ReadOnly:
6

Range

IsRanged gives the slider a second thumb, so what it selects is a span rather than a point - a price bracket, an age band, the hours a shift covers. The two ends are LowerValue and UpperValue, each bindable on its own, and RangeValue carries both at once for the common case where they travel together. DefaultLowerValue and DefaultUpperValue are their unbound counterparts. By default the thumbs may cross - drag the lower one past the upper and they simply trade places - which the Range constraints section below shows how to prevent.
Both thumbs are grabbed and dragged the way a single one is, and the rail between them is divided between the two at their midpoint: press it anywhere and the nearer thumb comes to meet you, then keeps following the pointer as if you had grabbed it. The keyboard reaches them as two tab stops, in a fixed order regardless of which thumb is visually where.

Basic:
0
0

DefaultLowerValue and DefaultUpperValue:
$200
$750

RangeValue, bound to both ends at once:
25
45

Disabled:
2
5

Marks

Marks turn a bare rail into a scale you can read without moving anything. ShowMarks draws one at every Step, and MarkStep widens that interval for the sliders where a mark per step would be a solid line - a 0 to 1000 slider wants its marks every 100, not every 1. ShowMarkLabels writes each generated mark's own value underneath it, formatted exactly the way the value labels are. For anything beyond a regular series, hand Marks a list of BitSliderMark: each one has a value, an optional label, and its own class and style - which is how a scale gets named stops ("Low", "Medium", "High") instead of numbers, or how one particular threshold gets painted red. Marks the fill has reached are drawn in the contrasting color so they stay legible on top of it, and marks outside the Min..Max range are simply skipped.
RestrictToMarks goes one step further and makes the marks the only values the user can pick, so the thumb jumps from one to the next instead of stopping in between. That is what turns an irregular scale - a set of named tiers, or a series that grows by tens and then by hundreds - into something the pointer and the keyboard can both land on exactly. It constrains only what the user can pick: a value bound from elsewhere is still drawn where it actually is.
The pointer and the keyboard are treated as the different things they are. A drag lands on the mark nearest to where the pointer actually is, so the thumb follows the hand and settles as it passes each halfway point. An arrow key is a request to move on, so it always reaches the next mark along, however short a Step is against the gap between them - without that, a Step of 1 on a scale marked every 64 would round straight back and the arrow keys would do nothing at all. On a ranged slider a snapped move is still held against the thumb beside it: it lands on the outermost mark the range constraints leave room for rather than stepping through the other end and dragging it along.

ShowMarks:
6

ShowMarks with labels:
3

MarkStep, for a scale too fine to mark at every step:
$400

Named stops through Marks:

RestrictToMarks, on an irregular scale (drag it, or use the arrow keys):

A ranged slider with marks:
9h
17h

RestrictToMarks on a range that has to keep its ends four apart:
8h
16h

Vertical

IsVertical stands the slider upright and fills it from the bottom up, so that "more" is up - the same direction the ArrowUp key already means. Everything follows: the marks and their labels run up the side, the floating thumb label moves beside the thumb rather than above it, and the value labels stack instead of flanking. A vertical slider has no length of its own to inherit from the line it sits on, so it is given one through the --bit-sld-length CSS variable, which you can change per instance or globally. It is the shape to reach for when the value is naturally a height - a level, a gain, a temperature - or when there is a column of room and no row.

4
4
2 cm
7
2
6
8

Fill, origin & inversion

The filled part of the track normally grows out of the near end, which reads as "how much" - but a value that can go both ways reads better as a distance from somewhere in the middle. IsOriginFromZero attaches the fill to zero, so a negative value fills to the left of it and a positive one to the right, and a tick marks where zero actually sits - which is only the middle of the track when the scale happens to be symmetric around it, as the -2..8 example below shows. Origin is the same idea with any anchor you like: a target, a baseline, last month's figure. Both are held inside the Min..Max range, and both are about the single value: a ranged slider already has two ends of its own to fill between, so neither the origin nor its tick appears on one. Inverted instead moves the origin to the far end, so the fill highlights what lies beyond the value rather than what lies before it - "how much is left" instead of "how much is used". An inverted range flips inside out too, highlighting the two outer segments and leaving the span between the thumbs bare, which is how an excluded band is drawn.
NoFill goes the other way and removes the bar altogether, leaving a bare rail with a thumb somewhere on it. That is the honest picture for a value with no sense of accumulation - a hue, a seek point, a position along a scale - where a growing bar would suggest a quantity that is not there. It also stops the marks from being repainted as "reached", since with no fill nothing has been.

IsOriginFromZero on a symmetric scale:
3

IsOriginFromZero on an asymmetric one (zero is not the middle):
-1 °C

Origin, anchored to a target rather than to zero:
85%

Inverted, showing what is left rather than what is used:
30%

An inverted range, drawing the excluded band:
35
65

NoFill, a position rather than a quantity:
45

NoFill on a range:
25
75

Thumb label

ThumbLabel puts the value on the thumb itself instead of - or as well as - beside the track. Auto shows it only while the slider is hovered, dragged or focused, so it appears exactly when the value is being changed and stays out of the way the rest of the time; On keeps it there permanently, which suits a slider whose value is the point of the screen. It follows the thumb of a ranged slider on both ends, is formatted by the same ValueFormat the other labels use, and moves beside the thumb rather than above it once the slider stands upright. Pair it with ShowValue="false" to keep the row compact.
When the label needs to be more than text, ThumbLabelTemplate replaces its content with markup of your own, built from the value that thumb stands for - an icon that changes with the level, a unit set in its own type, a second line. It is handed the value as its context, so the same template serves both ends of a range, and it only renders while ThumbLabel is asking for the label at all.

Auto - hover, drag or focus it:

On:

On a range:

Vertical:

ThumbLabelTemplate, an icon that follows the level:

Range constraints

Left alone, the two thumbs of a ranged slider are free: they can meet on a single value and they can cross over each other. Three parameters tighten that. MinRange is the smallest distance they are allowed to be apart, which is what keeps a range from collapsing onto one value - and since any distance to hold makes crossing meaningless, it stops them crossing too. MaxRange is the largest, so a thumb dragged far enough to stretch the range past it simply stops there. NoSwap asks for the ordering alone: the thumbs stay on their own sides but may still meet. A pair of starting values that does not already satisfy the constraints is widened or narrowed until it does - and reported back to whatever the range is bound to, so the slider never opens in a state it would refuse to be put into and never silently disagrees with the value behind it. Limits that contradict each other resolve rather than lock up: a negative MinRange is no distance at all, and a MaxRange below the MinRange is held up to it.
Pushable changes what happens at the moment the two thumbs meet: instead of the moving one stopping against the other, it carries the other along. That is what turns a constrained range into something you can slide bodily across the scale from either end - a fixed-width window over a timeline, a band that keeps its shape while it moves - rather than a pair you have to drag one thumb at a time. The pushed thumb stops at the end of the scale and the pushing one comes to rest beside it, so a range can be pushed all the way into a corner and pulled back out again. Pushing and crossing are opposites, so a pushable slider keeps its thumbs on their own sides, and it has nothing to do until there is a MinRange to keep or a NoSwap ordering to hold.
All of them are enforced by the browser rather than corrected afterwards - the constraint is pushed into the bounds of the underlying input - so a thumb never moves somewhere it will be pulled back from, on the pointer or on the keyboard, and that holds for a move snapped onto a mark by RestrictToMarks as much as for a plain one. And whatever the constraints are, a press on the bare rail still moves the thumb nearest to it: the rail is divided between the two thumbs at their midpoint, so every point of it belongs to the one you would expect it to - unless DraggableTrack has given the band between them a job of its own.

Unconstrained (drag the thumbs past each other):
30
70

NoSwap:
30
70

MinRange of 20:
20
60

MaxRange of 30:
30
50

MinRange of 10 and MaxRange of 40 together:
30
50

Pushable, on a range 20 wide (drag either thumb into the other):
20
40

Pushable with NoSwap alone, so the thumbs may meet before they push:
30
70

Draggable band

DraggableTrack makes the filled band between the two thumbs a handle in its own right: press it anywhere and the whole range travels with the pointer, keeping the width it had. That is the move a user is usually thinking of when they nudge a price bracket upwards or push a span of hours later in the day - one gesture rather than dragging one end and then chasing the other with it. The band comes to rest when its leading end reaches the end of the scale - or, on a scale the marks are the only values of, on the outermost mark that still leaves room for its width - and because the two thumbs never change their distance while it travels, every range constraint is satisfied the whole way along.
Only the rail strictly between the two thumbs takes the drag, so the thumbs themselves are still grabbed and moved individually - and a band squeezed down to less than a thumb's width simply has nothing to take hold of, which is what stops a range dragged shut from being impossible to open up again. The trade is that a press on the band no longer sends the nearer thumb there: the band gets it instead. The rail outside the thumbs is untouched and still moves the thumb nearest to it.
Dragging the band reports through OnRangeChange and OnRangeChangeEnd like any other move, and it pairs naturally with MinRange and MaxRange - a band held to a fixed width by setting both to the same number is a window you can only slide, which is exactly what a fixed-length selection over a timeline wants. It is a pointer gesture, so the keyboard reaches the two ends the way it always did, one thumb at a time.

Drag the band, not just the thumbs:
25
55

A fixed-width window, MinRange and MaxRange both 20:
30
50

With marks, where the band lands on them:
9h
15h

Vertical:
60
30

Value display

ValueFormat is an ordinary .NET numeric format string, applied to every label the slider draws - the ones beside the track, the ones under the marks and the floating one on the thumb - and rendered in the culture of the user, so a decimal separator comes out the way that user writes it. That covers currency (C0), percentages, fixed decimals and custom patterns alike. When the number is not what the value means, reach for GetValueText instead: it builds each label from the value itself, which is how minutes become "12:30", bytes become "1.5 MB", and a step index becomes the word it stands for. ShowValue turns the labels beside the track off entirely, for a slider whose value is already written somewhere else or is shown on the thumb instead. And LabelTemplate replaces the plain text Label with whatever markup you like, for a caption that needs an icon, a unit or a second line.

ValueFormat:
$450
69 %
2.5 rem

GetValueText, on a slider whose numbers are minutes past midnight:
12:30

ShowValue="false":

LabelTemplate:
6

Binding

@bind-Value is the usual two-way binding, and every change the user makes lands in your field immediately. Handing Value over one-way instead makes the slider follow that value and refuse to change it on its own, which is what you want when something else owns the number - the first pair below is driven entirely by the rating next to it. A ranged slider has three bindings to choose from: @bind-LowerValue and @bind-UpperValue separately, or @bind-RangeValue for both at once - whichever you use, all of them are kept in step, so a slider bound only by RangeValue still reports through LowerValueChanged.

One-way (the rating owns the value):
3

Two-way:
5

Two-way on both ends of a range:
25
75

Events

OnChange fires on every individual step, which is what keeps a live preview in sync with the thumb. OnChangeEnd fires once, when the interaction that changed the value ends - the pointer is released, or the keyboard change is committed - and that is where anything expensive belongs: a query, a save, a request. A ranged slider has the same pair under the names OnRangeChange and OnRangeChangeEnd, both handed a BitSliderRangeValue carrying both ends. Drag the sliders below and watch how much more often the first counter moves than the second.
OnFocusIn and OnFocusOut fire as a thumb takes and gives up the keyboard focus, which is where a hint, a live description or a highlight of the thing the slider controls belongs. A ranged slider reports through both from either of its two thumbs, so tabbing from one to the other fires an out and then an in.

OnChange and OnChangeEnd:
20

OnRangeChange and OnRangeChangeEnd:
20
60

OnFocusIn and OnFocusOut (tab into the slider, then out of it):
30
70

Validation

Inside an EditForm the slider is a form field like any other: it joins the EditContext, reports its changes to it, and repaints its track and thumb in the error color while the value is invalid. A slider always holds some number, so the interesting annotation is usually a Range narrower than the Min..Max the slider itself allows - "pick at least four" - which is what the example below asks for. Required announces that expectation to assistive technologies ahead of the failure rather than leaving the error message to be the first mention of it, and Name makes the slider readable by a plain form post, since the value travels in a real range input.
A ranged slider joins in the same way, through @bind-RangeValue: the pair it selects is one field of the model rather than two, so it carries its own annotation - a minimum width, a legal band, whatever the rule is - reports every move of a thumb to the EditContext, and repaints itself the moment the pair stops satisfying it. The second form below asks for a span of at least 20; drag the thumbs together and the error comes back without waiting for another submit.

0

40
50

Accessibility

Every thumb is a real range input, so the whole slider keyboard is there without asking: ArrowRight / ArrowUp raise the value by one Step and ArrowLeft / ArrowDown lower it, PageUp / PageDown move in larger jumps, and Home / End go to the ends of the scale. A ranged slider is two tab stops, in a fixed order regardless of which thumb is visually where, exactly as the WAI-ARIA multi-thumb pattern prescribes. Each thumb announces the bounds it can actually reach rather than the ends of the scale, so a constrained range tells a screen reader user where the thumb beside it has stopped them - while a read-only slider, whose bounds are a way of refusing the change rather than a description of the value, still announces the whole scale.
LargeStep names how far those larger jumps go. Left alone they are whatever the browser makes of a Page key - every engine measures it differently, and none of them makes anything of Shift at all - which is fine on a short scale and hopeless on a long one, where crossing a thousand values a step at a time is not a keyboard anyone can use. Setting it pins PageUp / PageDown to that distance and gives an arrow key held with Shift the same reach, while leaving the rest of the keyboard exactly as it was: the arrows still move by a Step, Home and End still go to the ends. A jump is held inside the same bounds every other move is - the ends of the scale, and the thumb beside it on a constrained range - and lands on a mark like every other move while RestrictToMarks is on.
Give the slider a name: Label is used as one when nothing else is set, AriaLabel overrides it, and LowerAriaLabel / UpperAriaLabel name the two ends of a range apart from each other - without them a screen reader announces the same name twice and the user cannot tell which thumb they are on. Where the thumbs are free to cross, the two names travel with the values rather than staying on the thumbs they started on, so the one announced as the minimum is always the one that actually holds it. AriaValueText is what a thumb announces in place of its number, for the many scales whose numbers are not what they mean: it turns 2 into "Medium" or 750 into "12:30". It is the spoken counterpart of GetValueText, and falls back to it when only the visible form is given - so a slider that already shows "12:30" announces "12:30" without being told twice. AutoFocus hands the slider the focus as the page renders, and FocusAsync does it from code at any moment after that - with FocusUpperAsync beside it for the other thumb of a range, which the single tab stop FocusAsync is pointed at cannot reach. The two inputs are also there as SliderInputElement and UpperSliderInputElement for anything the component does not do for you.
When there is no text to name a thumb with at all - a slider captioned only by a LabelTemplate - both thumbs are pointed at that caption instead, so the name a sighted reader sees is the name a screen reader announces, on the upper thumb of a range as much as on the lower one.

AriaValueText, naming the steps of a scale (listen, or inspect aria-valuetext):
2

LargeStep of 100 (focus a thumb, then use Page Up / Page Down or Shift with an arrow key):
400 Hz

LargeStep on a range, where each thumb stops against the other:
200
800

Named ends on a range (inspect the aria-label of each thumb):
$150
$800

FocusAsync and FocusUpperAsync, reaching either thumb from code:
25
75

A range captioned only by a LabelTemplate (inspect the aria-labelledby of each thumb):
3
7

Color

Color picks the theme color the filled part of the track and the thumbs are painted in, with Primary as the default. The unfilled part of the rail deliberately stays neutral whichever color is chosen, so it keeps reading as "not reached yet" rather than as a second, dimmer accent. The semantic colors - Success, Warning, Error and friends - tie the slider to what its value means, while the Background, Foreground and Border families keep it legible on non-default surfaces like the inverted panel below. Since Color is an ordinary parameter it can be computed from the bound value itself, which is how a slider turns from green to red as it climbs.

6
6
6
6
6
6
6
6

6
6
6

6
6
6
6
6
6

Size

Size scales the track, the thumbs and the labels together, from the Small that fits into a dense settings panel to the Large that carries the main control on a page. Medium is the default. A larger size also means a larger thumb to grab, which matters most on touch and on the fine-grained scales where a mis-grab costs the most.

Small:
6

Medium:
6

Large:
6

Vertical, in all three:
6
6
6

Style & Class

Style and Class reach the root element, which is enough for the framing around the slider and for the CSS variables it is built on: --bit-sld-thumb is the size of the thumbs, --bit-sld-rail the thickness of the track, --bit-sld-length the length of a vertical one, and --bit-sld-clr-rail the color of the part the fill has not reached. Styles and Classes go a level deeper and address the parts by name - Root, Label, Container, SliderBox, Track, Fill, Thumb (with LowerThumb and UpperThumb for the two ends of a range), the underlying inputs (ValueInput, LowerValueInput, UpperValueInput and the TrackInput a draggable band adds), Mark, MarkLabel, ThumbLabel, OriginFromZero and the value labels - so the fill can be given a gradient, the thumbs a shape of their own, or the two ends of a range two different colors, without leaving the component.

Component's Style & Class:
6

6


The CSS variables:
6
6


Styles & Classes:
6
6


The two thumbs of a range, styled apart:
3
7

RTL

Setting Dir to Rtl mirrors the whole slider: the scale starts on the right, the fill grows leftwards from it, the marks and their labels are laid out from that same edge, and the arrow keys follow - ArrowLeft raises the value because that is the direction the scale runs in. A vertical slider is deliberately left alone by this, since up means more in both directions of reading.

4

3

2
7

API

Every parameter, public member, sub-class and enum this component exposes.

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

BitComponentBase parameters

Name Type Default value Description
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.

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

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.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.