Edit on Github

Slider

in namespace DotVVM.BusinessPack.Controls

Renders a Slider control that allows the user to select a single numeric value on a scale.

Usage & Scenarios

Renders a slider with a numeric scale which allows the user to select a value.

For a range selection, you can use the RangeSlider control.

Sample 1: Basic Usage

The SelectedValue properties represent the value selected by the user.

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

page.dothtml
ViewModel.cs

<bp:Slider SelectedValue="{value: Value}"
           MinValue="0"
           MaxValue="100" />

<p>Selected value: {{value: Value}}</p>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int Value { get; set; } = 50;
    }
}

Sample 2: Step

The Step property defines a size of a step. The slider value is increased or decreased by this value.

page.dothtml
ViewModel.cs

<bp:Slider SelectedValue="{value: Value}"
           Step="0.1"
           MinValue="0"
           MaxValue="5" />

<p>Selected value: {{value: Value}}</p>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public double Value { get; set; } = 2.5;
    }
}

Sample 3: Changed Event

The Changed property specifies a command in the viewmodel that is triggered whenever the selected value change.

page.dothtml
ViewModel.cs

<bp:Slider SelectedValue="{value: Price}"
           Changed="{command: PriceChanged()}"
           MinValue="0"
           MaxValue="100" />

<p>Selected price: {{value: PriceString}}</p>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int Price { get; set; } = 50;
        public string PriceString { get; set; }

        public void PriceChanged()
        {
            PriceString = $"{Price}$";
        }
    }
}

Show all inherited properties

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 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. The DataContext is null in client-side templates.	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	True
ID	String	Gets or sets the control client ID within its naming container.	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. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	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
SelectedValue	Double	Gets or sets the value 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. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Changed	Command	Gets or sets the command triggered hen the value changes.