Edit on Github

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.

page.dothtml
ViewModel.cs

<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.

page.dothtml
ViewModel.cs

<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++;
    }

}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.	attribute inner element static value bindable default	null
Enabled	Boolean	Gets or sets a value indicating whether the range control is enabled.	attribute inner element static value bindable default	False
FormControlStyle	BootstrapFormStyle	Gets or sets the Bootstrap form style of the control.	attribute inner element static value bindable default	Default
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
MaxValue	Double	Gets or sets the end point of the scale.	attribute inner element static value bindable default	100
MinValue	Double	Gets or sets the start point of the scale.	attribute inner element static value bindable default	0
SelectedValue	Double	Gets or sets the value selected by the user.	attribute inner element static value bindable default	0
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
Visible	Boolean	Gets or sets whether the control is visible.	attribute inner element static value bindable default	True

Events

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