Trackbar Range Value Update

[James]

I am struggling with an feature that I'd like to implement.

Basically, I'd like a visual cue that indicates the current value of the range as end user changes the value of the range.

My TrackBar has 1440 minutes and I'd like to display what minute they're on without it being guess work.

I attached a screenshot of my implementation of the track bar.

Ideally, I'd like to display a label underneath the TrackbarThumbElement that would update as the value updates and then disappear. Any ideas how I might be able to update the UI with the current value of the range as the end user is manipulating the control?

[Dess | Tech Support Engineer, Principal]

Hello, James, 

Following the provided information, I have prepared a sample code snippet to simulate the desired behavior:

        public RadForm1()
        {
            InitializeComponent();

            this.radTrackBar1.LabelFormatting += radTrackBar1_LabelFormatting;
            this.radTrackBar1.Minimum = 0;
            this.radTrackBar1.Maximum = 25;
            this.radTrackBar1.LargeTickFrequency = 1;
            this.radTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.TopLeft;
            this.radTrackBar1.LabelStyle = TrackBarLabelStyle.TopLeft;
            this.radTrackBar1.TrackBarMode = TrackBarRangeMode.Range;
            this.radTrackBar1.RangeValueChanged += radTrackBar1_RangeValueChanged;
        }

        RadLabel label;
        Timer t;

        private void radTrackBar1_RangeValueChanged(object sender, RangeChangedEventArgs e)
        {
            if (label == null)
            {
                label = new RadLabel();
                this.Controls.Add(label);
                label.Location = new Point(this.radTrackBar1.Left, this.radTrackBar1.Bottom+10);
                t = new Timer();
                t.Tick += t_Tick;
                t.Interval = 2000;
            }
            label.Text = "From " + this.radTrackBar1.Ranges[0].Start + " To " + this.radTrackBar1.Ranges[0].End;
            label.Visible = true;
            t.Start();
        }

        private void t_Tick(object sender, EventArgs e)
        {
            label.Visible = false;
            t.Stop();
        }

        private void radTrackBar1_LabelFormatting(object sender, LabelFormattingEventArgs e)
        {
            e.LabelElement.AngleTransform = -90; 
            int value = -1;
            if (int.TryParse(e.LabelElement.Text, out value))
            {
                if (value == 0 || value == 25)
                {
                    e.LabelElement.Text = "12 AM";
                }
                else if (value < 12)
                {
                    e.LabelElement.Text += " AM";
                }
                else if (value == 12)
                {
                    e.LabelElement.Text = 12 + " PM";
                }
                else
                { 
                    e.LabelElement.Text = value - 12 + " PM";
                }
            }
        }

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[James]

Hello Dess,

Thanks for your reply.

I like your implementation. I was visualizing something different. However, your implementation is doable.

As always, Thank You.