Edit on Github

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.

page.dothtml
ViewModel.cs

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

page.dothtml
ViewModel.cs

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

page.dothtml
ViewModel.cs

<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}$";
        }
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	null
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 inner element static value bindable default	False
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 whether the slider is enabled.	attribute inner element static value bindable default	False
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 maximum value of the slider.	attribute inner element static value bindable default	100
MinValue	Double	Gets or sets the minimum value of the slider.	attribute inner element static value bindable default	0
SelectedEndValue	Double	Gets or sets the end of the range selected in the control.	attribute inner element static value bindable default	0
SelectedStartValue	Double	Gets or sets the start of the range selected in the control.	attribute inner element static value bindable default	0
Step	Double	Gets or sets the minimum step for increasing or decreasing the value.	attribute inner element static value bindable default	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 inner element static value bindable default	0
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 will be triggered hen the value changes.