Adding a Range Slider to Your Application

Before You Begin

You can add the range sliders, (e.g. xamNumericRangeSlider™ or xamDateTimeRangeSlider™), to your application using the same pattern as any control found in Microsoft® WPF™. This pattern involves using a layout container and adding the control to the Children collection of the layout container.

What You Will Accomplish

You will add the xamDateTimeRangeSlider control to your application. When you run the application, you should see the xamDateTimeRangeSlider control in your browser that looks similar to the screen shot below.

xamSlider Adding a Range Slider to Your Application 01 XAML.png

Follow these Steps

Create a WPF project.

Add the following NuGet package reference to your project:
- Infragistics.WPF.Slider
For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Place using/Imports directives in your code-behind or add an XML namespace definition for xamSlider™ controls.

In XAML:
```
xmlns:ig="http://schemas.infragistics.com/xaml"
```
In Visual Basic:
```
Imports Infragistics.Controls.Editors
```
In C#:
```
using Infragistics.Controls.Editors;
```

Add an instance of the xamDateTimeRangeSlider control to default Grid layout panel named "LayoutRoot". If you are doing this in procedural code, you can handle the UserControl’s Loaded event and place the code in the event handler.

Set its Name property to xamDateTimeRangeSlider1.
Set its MinValue property to 1/1/2009 in XAML or to an equivalent DateTime structure in code.
Set its MaxValue property to 12/31/2009 or to an equivalent DateTime structure in code.

In XAML:

<ig:XamDateTimeRangeSlider
    Name="xamDateTimeRangeSlider1"
    MinValue="1/1/2009"
    MaxValue="12/31/2009">
    <!--TODO: Add DateTimeSliderTickMark objects to the TickMarks collection-->
    <!--TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection-->
</ig:XamDateTimeRangeSlider>

In Visual Basic:

Dim xamDateTimeRangeSlider1 As XamDateTimeRangeSlider
Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    xamDateTimeRangeSlider1 = New xamDateTimeRangeSlider With {.MinValue = New DateTime(2009, 1, 1), .MaxValue = New DateTime(2009, 12, 31)}
    Me.LayoutRoot.Children.Add(xamDateTimeRangeSlider1)
    'TODO: Add DateTimeSliderTickMark objects to the TickMarks collection
    'TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection
End Sub

In C#:

XamDateTimeRangeSlider xamDateTimeRangeSlider1;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    xamDateTimeRangeSlider1 = new XamDateTimeRangeSlider
    {
        MinValue = new DateTime(2009, 1, 1),
        MaxValue = new DateTime(2009, 12, 31)
    };
    this.LayoutRoot.Children.Add(xamDateTimeRangeSlider1);
    //TODO: Add DateTimeSliderTickMark objects to the TickMarks collection
    //TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection
}

Add a DateTimeSliderTickMarks object to the xamDateTimeRangeSlider control’s TickMarks collection. For numeric slider controls, i.e., xamNumericSlider or xamNumericRangeSlider, you have to add SliderTickMarks objects to their TickMarks collection instead of DateTimeSliderTickMarks objects.
- Set its NumberOfTickMarks property to 10.
- Set its UseFrequency property to False. The xamSlider controls will ignore the NumberOfTickMarks property if you do not set the UseFrequency property to False.
In XAML:
```
<ig:XamDateTimeRangeSlider.TickMarks>
    <ig:DateTimeSliderTickMarks NumberOfTickMarks="10" UseFrequency="/>
</ig:XamDateTimeRangeSlider.TickMarks>
```
In Visual Basic:
```
Dim majorTickMarks As New DateTimeSliderTickMarks With {.NumberOfTickMarks = 10, .UseFrequency = False}
Me.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks)
```
In C#:
```
DateTimeSliderTickMarks majorTickMarks = new DateTimeSliderTickMarks
{
    NumberOfTickMarks = 10,
    UseFrequency = false
};
this.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks);
```

Add three xamSliderDateTimeThumb objects to the xamDateTimeRangeSlider control’s Thumbs collection. You do not have to declare tags for the Thumbs collection in XAML. For the xamNumericRangeSlider control, you have to add xamSliderNumericThumb objects to its Thumbs collection instead of xamSliderDateTimeThumb objects.