RangeSlider
in namespace DotVVM.BusinessPack.Controls
Renders a Slider control that allows the user to select a range of numeric values on a scale.
Usage & Scenarios
Renders a slider with a numeric scale which allows the user to select two values.
For a single value selection, you can use the Slider control.
Sample 1: Basic Usage
The SelectedMinValue and SelectedMaxValue properties represent the values selected by the user.
The MinValue and MaxValue properties specify the start and end point of the scale.
<bp:RangeSlider SelectedMinValue="{value: Minimum}"
SelectedMaxValue="{value: Maximum}"
MinValue="0"
MaxValue="100" />
<p>Selected range: {{value: Minimum}} - {{value: Maximum}}</p>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.RangeSlider.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public int Minimum { get; set; }
public int Maximum { get; set; } = 100;
}
}Sample 2: Step
The Step property defines a size of a step. The slider values are increased or decreased by this value.
<bp:RangeSlider SelectedMinValue="{value: Minimum}"
SelectedMaxValue="{value: Maximum}"
Step="0.1"
MinValue="0"
MaxValue="5" />
<p>Selected range: {{value: Minimum}} - {{value: Maximum}}</p>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.RangeSlider.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public double Minimum { get; set; }
public double Maximum { get; set; } = 5;
}
}Sample 3: Changed Event
The Changed property specifies a command in the viewmodel that is triggered whenever any of the selected values change.
<bp:RangeSlider SelectedMinValue="{value: MinimumPrice}"
SelectedMaxValue="{value: MaximumPrice}"
Changed="{command: PriceRangeChanged()}"
MinValue="0"
MaxValue="100" />
<p>Selected price range: {{value: PriceRangeString}}</p>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.RangeSlider.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public int MinimumPrice { get; set; }
public int MaximumPrice { get; set; } = 100;
public string PriceRangeString { get; set; }
public void PriceRangeChanged()
{
PriceRangeString = $"{MinimumPrice}$ - {MaximumPrice}$";
}
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
AutoFocus | Boolean | Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false. |
attribute
static value
|
False |
|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
Enabled | Boolean | Gets or sets whether the slider is enabled. |
attribute
static value
bindable
|
True |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
InnerText | String | Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children. |
attribute
static value
bindable
|
null |
|
MaxValue | Double | Gets or sets the maximum value of the slider. |
attribute
static value
bindable
|
100 |
|
MinValue | Double | Gets or sets the minimum value of the slider. |
attribute
static value
bindable
|
0 |
|
SelectedMaxValue | Double | Gets or sets the end of the range selected in the control. |
attribute
bindable
|
0 |
|
SelectedMinValue | Double | Gets or sets the start of the range selected in the control. |
attribute
bindable
|
0 |
|
Step | Double | Gets or sets the minimum step for increasing or decreasing the value. |
attribute
static value
bindable
|
1 |
|
TabIndex | Int32 | Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order. |
attribute
static value
bindable
|
0 |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
bindable
|
True |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
Changed | Command | Gets or sets the command triggered hen the value changes. |