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
<BitSlider Label="Basic slider" />
<BitSlider Label="Disabled slider" DefaultValue="5" IsEnabled="false" />
<BitSlider Label="Snapping slider" Min="0" Max="50" Step="10" />
<BitSlider Label="Formatted value" Max="1" Step="0.01" DefaultValue="0.69" ValueFormat="0 %" />
<BitSlider Label="Origin from zero" Min="-5" Max="5" DefaultValue="0" IsOriginFromZero="true" />Visibility
Demonstrates different visibility states of BitSlider: Visible, Hidden, and Collapsed.
Visible: [
]
Hidden: [
]
Collapsed: [ ]
Visible: [ <BitSlider Visibility="BitVisibility.Visible" /> ]
Hidden: [ <BitSlider Visibility="BitVisibility.Hidden" /> ]
Collapsed: [ <BitSlider Visibility="BitVisibility.Collapsed" /> ]Vertical
Change BitSlider orientation easily to vertical.
<BitSlider Label="Basic" IsVertical="true" />
<BitSlider Label="Disabled" IsVertical="true" IsEnabled="false" />
<BitSlider Label="Formatted value" IsVertical="true" DefaultValue="2" ValueFormat="0 cm" />
<BitSlider Label="Origin from zero" IsVertical="true" Min="-5" Max="5" DefaultValue="0" IsOriginFromZero="true" />Range
Use BitSlider in ranged mode enabled with various configurations.
<BitSlider Label="Basic" IsRanged="true" />
<BitSlider Label="Disabled" IsRanged="true" DefaultLowerValue="2" DefaultUpperValue="5" IsEnabled="false" />
<BitSlider Label="Formatted value" IsRanged="true"
Step="0.1"
ValueFormat="0.0 px"
DefaultLowerValue="4.2"
DefaultUpperValue="8.5" />
<BitSlider Label="Origin from zero" IsRanged="true"
Min="-5"
Max="5"
DefaultUpperValue="2"
IsOriginFromZero="true" />Vertical & Range
Combine vertical orientation and range together selection in BitSlider.
<BitSlider Label="Basic" IsVertical="true" IsRanged="true"
DefaultLowerValue="1"
DefaultUpperValue="2" />
<BitSlider Label="Disabled" IsVertical="true" IsRanged="true"
DefaultUpperValue="1"
DefaultLowerValue="3"
IsEnabled="false" />
<BitSlider Label="Formatted value" IsVertical="true" IsRanged="true"
Step="0.01"
ValueFormat="0.00 rem"
DefaultLowerValue="4.20"
DefaultUpperValue="6.9" />
<BitSlider Label="Origin from zero" IsVertical="true" IsRanged="true"
Min="-5"
Max="5"
DefaultUpperValue="3"
IsOriginFromZero="true" />Style & Class
Customize the appearance of BitSlider using styles and CSS classes.
<style>
.custom-input::-webkit-slider-thumb {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: -0.75rem;
border-color: whitesmoke;
background-color: whitesmoke;
box-shadow: 0 0 0.5rem 0 lightgray;
}
.custom-input:hover::-webkit-slider-thumb {
border-color: whitesmoke;
background-color: whitesmoke;
}
.custom-input::-webkit-slider-runnable-track {
height: 0.125rem;
background: linear-gradient(dodgerblue, dodgerblue) 0/var(--sx) 100% no-repeat, whitesmoke;
}
.custom-input:hover::-webkit-slider-runnable-track {
background: linear-gradient(dodgerblue, dodgerblue) 0/var(--sx) 100% no-repeat, whitesmoke;
}
.custom-slider-box {
background: linear-gradient(0deg, seagreen calc(0.5rem * 0.5), transparent 0);
}
.custom-slider-box:hover {
background: linear-gradient(0deg, seagreen calc(0.5rem * 0.5), transparent 0);
}
.custom-slider-box:hover::before {
background-color: darkgreen;
}
.custom-slider-box::before {
background-color: green;
}
.custom-range-input::-webkit-slider-thumb {
background-color: white;
border: 0.25rem solid green;
}
.custom-range-input:hover::-webkit-slider-thumb {
background-color: white;
border: 0.25rem solid darkgreen;
}
</style>
<BitSlider DefaultValue="3"
Label="Custom styles"
Styles="@(new() { Root = "text-shadow: aqua 0 0 1rem;",
Label = "font-weight: 900; font-size: 1.25rem;" } )" />
<BitSlider DefaultValue="5"
Label="Custom classes"
Classes="@(new() { ValueInput = "custom-input" } )" />
<BitSlider IsRanged="true"
Max="100"
DefaultLowerValue="54"
DefaultUpperValue="84"
Classes="@(new() { LowerValueInput = "custom-range-input",
UpperValueInput = "custom-range-input",
SliderBox = "custom-slider-box" } )" />Binding
Bind value one-way and two-way in BitSlider.
<BitSlider Label="One-way" Value="oneWayBinding" /> <BitRating Max="10" @bind-Value="oneWayBinding" /> <BitSlider Label="Two-way" @bind-Value="twoWayBinding" /> <BitRating Max="10" @bind-Value="twoWayBinding" /> <BitSlider Label="OnChange" DefaultValue="2" OnChange="v => onChangeValue = v.Value" /> <BitLabel>OnChange value: @onChangeValue</BitLabel>@code { private double oneWayBinding = 1; private double twoWayBinding = 1; private object? onChangeValue; }
RTL
Use BitSlider in right-to-left (RTL).
<BitSlider Label="RTL slider" Dir="BitDir.Rtl" />
<BitSlider IsRanged Label="RTL ranged slider"
Dir="BitDir.Rtl"
DefaultLowerValue="2"
DefaultUpperValue="5" />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 | 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. |
| Dir | BitDir? | null | Determines the component direction. |
| 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 |
|---|---|---|---|
| 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