Range

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap Range input control.

Usage & Scenarios

Renders the Bootstrap range form control.

https://getbootstrap.com/docs/4.3/components/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: OnValueChanged()}"
          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; }

    public bool Enabled { get; set; } = true;

    public void OnValueChanged() 
    {
        ValueChanges++;
    }

}

Properties

Name Type Description Notes Default Value
property icon Enabled Boolean Gets or sets a value indicating whether the range control is enabled.
attribute
inner element
static value
bindable
default
False
property icon FormControlStyle BootstrapFormStyle Gets or sets the Bootstrap form style of the control.
attribute
inner element
static value
bindable
default
Default
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

Events

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

HTML produced by the control