Thumb Values and Range

The C1RangeSlider's value range is determined by the difference between the UpperValue property and the LowerValue property. These two properties are connected to the thumbs used to select the range of values:

Setting the Thumb Values

The C1RangeSlider control includes two thumbs for selecting a range of values. The UpperValue and the LowerValue thumbs move along the slider track. By default, the UpperValue property is set to 100 and the LowerValue property is set to 0.

Using one of the following methods, you can customize the thumb values.

In XAML

To set the UpperValue and LowerValue properties add UpperValue="90" LowerValue="10" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

<c1:C1RangeSlider Name="C1RangeSlider1" Width="26" Height="18" UpperValue="90" LowerValue="10" />

In Code

For example, to set the UpperValue and LowerValue properties add the following code to your project:

Me.C1RangeSlider1.LowerValue = 10
Me.C1RangeSlider1.UpperValue = 90

this.c1RangeSlider1.LowerValue = 10;
this.c1RangeSlider1.UpperValue = 90;

At Design Time

To set the UpperValue and LowerValue properties at Design time, complete the following steps:

1. Click the C1RangeSlider control once to select it.

2. Navigate to the Properties window, and enter a number, for example "10", in the text box next to the LowerValue property.

3. Still in the Properties window, enter a number, for example "90", in the text box next to the UpperValue property.

This will set the UpperValue and LowerValue properties to the values you chose.

Setting the ValueChange Property

The ValueChange property determines by what value the UpperValue and the LowerValue thumbs move along the slider track when the track is clicked, note that if the tack is clicked between the UpperValue and LowerValue thumbs (in the range) the thumbs will not move.

The UpperValue property cannot be less than the Minimum property and the LowerValue cannot be less than the Maximum property.

Using any of the following methods, when you click the track of the C1RangeSlider control, the closest thumb will move by 5 units.

In XAML

To set the ValueChange property add ValueChange="5" to the <c1:C1RangeSlider> tag so that it appears similar to the following:

<c1:C1RangeSlider Name="C1RangeSlider1" Height="18" Width="26" ValueChange="5" />

In Code

To set the ValueChange property add the following code to your project:

Me.C1RangeSlider1.ValueChange = 5

this.c1RangeSlider1.ValueChange = 5;

At Design Time

To set the ValueChange property at Design time, complete the following steps:

1. Click the C1RangeSlider control once to select it.

2. Navigate to the Properties window and enter a number, for example "5", in the text box next to the ValueChange property.

This will set the ValueChange property to the value you chose.