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.
<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.
<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.
<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}$";
}
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
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
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. |
attribute
static value
bindable
|
null | |
Enabled | Boolean | Gets or sets whether the slider is enabled. |
attribute
static value
bindable
|
False | |
ID | String | Gets or sets the unique control ID. |
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. |
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 | |
SelectedValue | Double | Gets or sets the value 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
|
0 | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
Changed | Command | Gets or sets the command that will be triggered hen the value changes. |