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 SelectedStartValue and SelectedEndValue properties represent the values selected by the user.

The MinValue and MaxValue properties specify the start and end point of the scale.

<bp:RangeSlider SelectedStartValue="{value: Minimum}"
                SelectedEndValue="{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 SelectedStartValue="{value: Minimum}"
                SelectedEndValue="{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 SelectedStartValue="{value: MinimumPrice}"
                SelectedEndValue="{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
property icon Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
null
property icon 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
property icon ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
property icon 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
property icon Enabled Boolean Gets or sets whether the slider is enabled.
attribute
inner element
static value
bindable
default
True
property icon ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
null
property icon InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
null
property icon MaxValue Double Gets or sets the maximum value of the slider.
attribute
inner element
static value
bindable
default
100
property icon MinValue Double Gets or sets the minimum value of the slider.
attribute
inner element
static value
bindable
default
0
property icon SelectedEndValue Double Gets or sets the end of the range selected in the control.
attribute
inner element
static value
bindable
default
0
property icon SelectedStartValue Double Gets or sets the start of the range selected in the control.
attribute
inner element
static value
bindable
default
0
property icon Step Double Gets or sets the minimum step for increasing or decreasing the value.
attribute
inner element
static value
bindable
default
1
property icon 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
property icon Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
event icon Changed Command Gets or sets the command that will be triggered hen the value changes.

HTML produced by the control