Slider
Range
Range
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
Visibility
Demonstrates different visibility states of BitSlider: Visible, Hidden, and Collapsed.
Visible: [
]
Hidden: [
]
Collapsed: [ ]
Vertical
Change BitSlider orientation easily to vertical.
Range
Use BitSlider in ranged mode enabled with various configurations.
Vertical & Range
Combine vertical orientation and range together selection in BitSlider.
Style & Class
Customize the appearance of BitSlider using styles and CSS classes.
Binding
Bind value one-way and two-way in BitSlider.
RTL
Use BitSlider in right-to-left (RTL).
API
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 | 0 | 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 | 0 | The upper value of the ranged Slider. |
| Value | double | 0 | The value of the Slider. |
| ValueFormat | string? | null | Custom formatter for the Slider value. |
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. |
| 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. |
| UpperValueLabel | string? | null | Custom CSS classes/styles for the BitSlider's upper value label. |
| Container | string? | null | Custom CSS classes/styles for the BitSlider's container. |
| LowerValueLabel | string? | null | Custom CSS classes/styles for the BitSlider's lower value label. |
| SliderBox | string? | null | Custom CSS classes/styles for the BitSlider's box. |
| 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. |
| OriginFromZero | string? | null | Custom CSS classes/styles for the BitSlider's origin from zero. |
| ValueLabel | string? | null | Custom CSS classes/styles for the BitSlider's value label. |
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. |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page