Slider - bit BlazorUI
Home Docs

Slider

A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.

Usage

Basic













Vertical slider
Range slider









Vertical Range Slider
Style & Class

Visibility
Visible: [
]
Hidden: [ ]
Collapsed: [ ]
SliderBoxHtmlAttributes

Implementation

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.
Classes BitSliderClassStyles? null Custom CSS classes for different parts of the BitSlider.
DefaultLowerValue double? null The default lower value of the ranged Slider.
DefaultUpperValue double? null The default upper value of the ranged Slider.
DefaultValue double? null The default value of the Slider.
IsOriginFromZero bool false Whether to attach the origin of slider to zero.
IsRanged bool false If ranged is true, display two thumbs that allow the lower and upper bounds of a range to be selected.
IsReadonly bool false Whether to render the Slider as readonly.
IsVertical bool false Whether to render the slider vertically.
Label string? null Description label of the Slider.
LowerValue double? null The lower value of the ranged Slider.
Min double 0 The min value of the Slider.
Max double 10 The max value of the Slider.
OnChange EventCallback<ChangeEventArgs> Callback when the value has been changed. This will be called on every individual step.
RangeValue BitSliderRangeValue? null The initial range value of the Slider. Use this parameter to set value for both LowerValue and UpperValue.
ShowValue bool true Whether to show the value on the right of the Slider.
SliderBoxHtmlAttributes Dictionary<string, object>? null Additional parameter for the Slider box.
Step double 1 The difference between the two adjacent values of the Slider.
Styles BitSliderClassStyles? null Custom CSS styles for different parts of the BitSlider.
UpperValue double? null The upper value of the ranged Slider.
Value double? null The value of the Slider.
ValueFormat string? null Custom formatter for the Slider value.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitSliderClassStyles properties
Name
Type
Default value
Description
Container string? null Custom CSS classes/styles for the sider's container.
Label string? null Custom CSS classes/styles for the sider's label.
UpperValueInput string? null Custom CSS classes/styles for the sider's upper value input.
LowerValueInput string? null Custom CSS classes/styles for the sider's lower value input.
SliderBox string? null Custom CSS classes/styles for the sider's box.
LowerValueInput string? null Custom CSS classes/styles for the sider's lower value input.
Root string? null Custom CSS classes/styles for the sider's root element.
UpperValueInput string? null Custom CSS classes/styles for the sider's upper value input.
ValueInput string? null Custom CSS classes/styles for the sider's value input.
OriginFromZero string? null Custom CSS classes/styles for the sider's origin from zero.
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).