tracker that mimics video status bar setting IN and OUT

[Brett]

Is there away to use the tracking component to track between 2 values.  What I'm trying to mimic is a video time status bar.  I want the user to be able to set the IN and OUT between the start time and the end time.  Then when they play the video it will have a current status bar between the IN and OUT that shows the current time of the clip that is playing.

I attached an image of what Adobe premiere looks like. I know it can't look like this but would love to be able to do something like it that would have a tracker that has a min of 0 and max of lets say 60 (secs) then a user set the IN at 4 (sec) and OUT at 20 (sec) then when they play the thumb will move between those 2 numbers.  Even if it's just a visual background range color that is set between those 2 numbers it would work.  I just need to make it so that it's visual that the user selected those 2 ranges.

Hope this makes sense.

[Hristo]

Hello Brett,

The RadTrackBar control can be set up to support multiple ranges. Looking into the provided description and screenshot, I can suggest using the Range mode with appropriate segments according to your actual scenario: 

this.radTrackBar1.TrackBarMode = Telerik.WinControls.UI.TrackBarRangeMode.Range;

Additional information is also available here: https://docs.telerik.com/devtools/winforms/track-and-status-controls/trackbar/modes.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Brett]

Thanks for the reply.  I have messed with the range mode, but what I really want to know is there a way to have a range then have the thumb "one that is in the middle of the range" and only allow it to move/dragged in between the range that is set.

[Hristo]

Hi Brett,

RadTrackBar has a predefined StartFromTheBeginning mode and ranges can be set up so that you have a single thumb in the middle. However, this mode will not cover entirely your scenario as the ranges will always start from the beginning and not at the desired start and end times.

I can suggest creating a single range defining the proper start and end values. Then you can add a custom thumb element as a child of the range element. In order to position the custom thumb along the range, you will need to manipulate its PositionOffset property. I am sending you attached my test project. Please note that in the custom thumb class the base implementation of the MouseMove method should not be called. I am sending you attached my test project as well as a short video showing the result on my end.

I hope this helps. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[Brett]

Thanks for the sample.  This is a good example.  Wish it would be dragged between the range I get why it can't.

 

[Hristo]

Hi Brett,

In order to drag the custom thumb element, you will need to override its MouseMove method. Below is a sample implementation, as this solution is supported out of the box, please note that it may not handle all possible cases: 

long prev = DateTime.Now.Ticks;
protected override void OnMouseMove(MouseEventArgs e)
{
    if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
    {
        long ticks = DateTime.Now.Ticks;

        if (ticks - prev > 1000)
        {
            float offset = e.Location.X - this.Parent.LocationToControl().X;
            offset = Math.Min(this.Parent.DesiredSize.Width - this.DesiredSize.Width, offset);
            this.PositionOffset = new SizeF(Math.Max(0, offset), 0);
        }

        prev = ticks;
    }
}

Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Brett]

Thanks this is great, exactly what I was looking for!!

Thanks again!