Version: 2.0 |

Range

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap Range input control.

Properties

Name Type Description Notes Default Value
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
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

Events

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

Usage & Scenarios

Renders the Bootstrap range form control.

https://getbootstrap.com/docs/4.1/components/forms/#range

HTML Rendered by the Control

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

}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message