Range

in namespace DotVVM.Bootstrap5.Controls

Renders a Bootstrap range input.

Usage & Scenarios

Renders the Bootstrap range form control.

https://getbootstrap.com/docs/5.2/forms/range/#

Sample 1: Basic Range

The MinValue and MaxValue properties specify the boundaries for selected values.

The Step property defines the difference between selectable values.

The SelectedValue property contains a binding to a viewmodel property with value selected in the range control.

<bs:Range MinValue="0" MaxValue="2000" Step="10" 
          SelectedValue="{value: Value}" />

{{value: Value}}
public class ViewModel : DotvvmViewModelBase
{
    public double Value { get; set; } = 1000;
}

Sample 2: Range Changes

The Changed event occurs when the user changes the selected value.

The Enabled property can be used to enable and disable the control.

<bs:Range MinValue="0" MaxValue="2000" Step="10" 
          SelectedValue="{value: Value}"
          Changed="{command: ValueChanges = ValueChanges + 1}"
          Enabled="{value: Enabled}" />

<p>Value: {{value: Value}}</p>
<p>Number of changes: {{value: ValueChanges}}</p>

<p><bs:CheckBox Text="Allow changes" Checked="{value: Enabled}" /></p>
public class ViewModel : DotvvmViewModelBase
{
    public double Value { get; set; } = 1000;
    public int ValueChanges { get; set; } = 0;
    public bool Enabled { get; set; } = true;
}

Properties

Name Type Description Notes Default Value
property icon Enabled Boolean Gets or sets a value indicating whether the control is enabled.
attribute
inner element
static value
bindable
default
True
property icon MaxValue Double Gets or sets the end point of the scale.
attribute
inner element
static value
bindable
default
100
property icon MinValue Double Gets or sets the start point of the scale.
attribute
inner element
static value
bindable
default
0
property icon SelectedValue Double Gets or sets the value selected by the user.
attribute
inner element
static value
bindable
default
0
property icon Step Double Gets or sets the size of the step which defines the difference between selectable values.
attribute
inner element
static value
bindable
default
1
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
event icon Changed ICommandBinding Gets or sets the command that triggers when the user finishes changing the value.

HTML produced by the control