- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • 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




    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 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.
    • On this page