Skip to main content

BnSlider

Namespace: BlazorNative.Components

A slider for picking a number from a range. Renders as a native SeekBar on Android and a UISlider on iOS.

public class BnSlider : BnLayoutItem, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender

Inheritance ObjectComponentBaseBnLayoutItemBnSlider
Implements IComponent, IHandleEvent, IHandleAfterRender

Remarks:

The range is declared, not inherited: Min defaults to 0 and Max to 100, and both always travel to the platform, so the two never disagree about what the track means. Step is optional — leave it unset for a continuous slider.

Its intrinsic height is the platform's, but its natural width is not something you should rely on: give it a Width (or let a flex parent size it) whenever the exact width matters.

<BnSlider @bind-Value="_volume" Min="0" Max="100" Step="5" Width="240" />

@code {
private float _volume = 25f;
}

Properties

Value

The current value, between BnSlider.Min and BnSlider.Max.

public float Value { get; set; }

Property Value

Single

ValueChanged

Raised with the new value as the user drags — the write-back half of the @bind-Value pair.

public EventCallback<float> ValueChanged { get; set; }

Property Value

EventCallback<Single>

Min

Lower bound of the range. Default 0.

public float Min { get; set; }

Property Value

Single

Max

Upper bound of the range. Default 100.

public float Max { get; set; }

Property Value

Single

Step

Snap increment — the value moves in multiples of this. Null = continuous.

public float? Step { get; set; }

Property Value

Single?

Enabled

Set false to show the platform's disabled slider and stop it responding. Default true.

public bool Enabled { get; set; }

Property Value

Boolean

BackgroundColor

Fill colour behind the component. Null leaves it transparent.

public string? BackgroundColor { get; set; }

Property Value

String

Margin

Space outside the component, between it and its siblings. Null = none.

public BnAutoLength? Margin { get; set; }

Property Value

BnAutoLength?

Remarks:

auto is legal here and absorbs free space, which re-centres the node.

AlignSelf

Cross-axis alignment for this item alone, overriding the parent's. Null = inherit.

public FlexAlign? AlignSelf { get; set; }

Property Value

FlexAlign?

Grow

Share of leftover space this item takes (unitless ratio). Null = Yoga's default (0).

public float? Grow { get; set; }

Property Value

Single?

Shrink

Share of overflow this item gives up (unitless ratio). Null = Yoga's default (1).

public float? Shrink { get; set; }

Property Value

Single?

Basis

Starting main-axis size before grow/shrink. Null = auto.

public BnAutoLength? Basis { get; set; }

Property Value

BnAutoLength?

Width

Box width. Null = auto.

public BnAutoLength? Width { get; set; }

Property Value

BnAutoLength?

Height

Box height. Null = auto.

public BnAutoLength? Height { get; set; }

Property Value

BnAutoLength?

MinWidth

Lower bound on width. Null = unset.

public BnLength? MinWidth { get; set; }

Property Value

BnLength?

MaxWidth

Upper bound on width. Null = unset.

public BnLength? MaxWidth { get; set; }

Property Value

BnLength?

MinHeight

Lower bound on height. Null = unset.

public BnLength? MinHeight { get; set; }

Property Value

BnLength?

MaxHeight

Upper bound on height. Null = unset.

public BnLength? MaxHeight { get; set; }

Property Value

BnLength?

Position

Positioning scheme. Null = Yoga's default (relative).

public FlexPosition? Position { get; set; }

Property Value

FlexPosition?

Top

Top inset. Null = unset.

public BnLength? Top { get; set; }

Property Value

BnLength?

Right inset. Null = unset.

public BnLength? Right { get; set; }

Property Value

BnLength?

Bottom

Bottom inset. Null = unset.

public BnLength? Bottom { get; set; }

Property Value

BnLength?

Left

Left inset. Null = unset.

public BnLength? Left { get; set; }

Property Value

BnLength?

Constructors

BnSlider()

public BnSlider()