DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Slider

in namespace DotVVM.BusinessPack.Controls

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

Properties

Name Type Description Notes Default Value
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
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
Enabled Boolean Gets or sets whether the slider is enabled.
attribute
inner element
static value
bindable
default
True
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
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
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.

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.

HTML Rendered by the 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>
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample1
{
    public class ViewModel
    {
        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>
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample2
{
    public class ViewModel
    {
        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>
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Slider.sample3
{
    public class ViewModel
    {
        public int Price { get; set; } = 50;
        public string PriceString { get; set; }

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

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message