This project has moved. For the latest updates, please go here.

Using range slider to show start and stop times

Jun 5 at 1:53 PM
Hi,
I need a range control to allow setting start and end times with a granularity of 5 mins, e.g.
Thumb 1 could be 06:35 and Thumb 2 could be 15:45. Can this be accomplished with range slider ?

Thanks,

Simon.
Developer
Jun 5 at 8:24 PM
Hi,

Yes you can do this with the RangeSlider.
Define a RangeSlider going from 0 to 1440 (number of minutes in a day).
Set a Step of 5 (Clicking on the track will increase or decrease the thumbs by 5 minutes)
Set IsSnapToTickEnabled to true and TickFrequency to 5 so that sliding the thumb will only snaps on 5 minutes.
Use a converter to return a DateTime value, which could be formatted in a TextBlock :
  <xctk:RangeSlider x:Name="_rangeSlider"
                      Minimum="0"
                      Maximum="1440"
                      HigherValue="80"
                      LowerValue="50"
                      Step="5"
                      IsSnapToTickEnabled="True"
                      TickFrequency="5"/>

    <TextBlock Text="{Binding LowerValue, ElementName=_rangeSlider, Converter={StaticResource MyConverter}, StringFormat={}{0:hh:mm tt}}" />
    <TextBlock Text="{Binding HigherValue, ElementName=_rangeSlider, Converter={StaticResource MyConverter}, StringFormat={}{0:hh:mm tt}}" />
  public class MyConverter : IValueConverter
  {
    public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
    {
      if( value is double )
      {
        return DateTime.Today.AddMinutes( (double)value );
      }
  
      return null;
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
    {
      throw new NotImplementedException();
    }
  }
Please note that you need to set a background for LowerRangeBackground and HigherRangeBackground in order to be able to click the tracks. They are currently null, you can set them to Transparent or any other Color. This will be fixed in v3.5.