MouseOver Tooltip at Slider Track Position

3 posts, 1 answers
  1. Jose
    Jose avatar
    4 posts
    Member since:
    Sep 2014

    Posted 08 May 2015 Link to this post

    Hi,

     Is there a way to show a tooltip with the value of the slider of the current position of the mouse over the track? So the user know the value is going to select beforehand.

    Thanks, Jose

  2. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 13 May 2015 Link to this post

    Hello Jose,

    The described functionality is not supported out of the box by RadSlider. However, you can implement it with additional code. Basically, you can subscribe for the MouseMove event and based on several factors - like track width, height, max value, min value and mouse position - calculate a prediction value that will be displayed in the tool tip.
    public MainWindow()
    {
        InitializeComponent();
        this.slider.Loaded += slider_Loaded;
        this.slider.MouseMove += slider_MouseMove;
    }
     
    private ContentControl sliderTrack;
     
    // Get the ContentControl that represents the track of the slider
    void slider_Loaded(object sender, RoutedEventArgs e)
    {
        this.sliderTrack = this.slider.ChildrenOfType<ContentControl>().FirstOrDefault(x => x.Name == "Track");
    }
     
    // Calculate the tooltip value based on the mouse position and the slider's size, and values.
    void slider_MouseMove(object sender, MouseEventArgs e)
    {           
        Point positionUnderMouse = e.GetPosition(this.sliderTrack);
        var predictedValue = PixelsToValue(positionUnderMouse.X, this.slider.Minimum, this.slider.Maximum, this.sliderTrack.ActualWidth);
    // set the tooltip
    }
     
    private double PixelsToValue(double pixels, double minValue, double maxValue, double width)
    {
        var range = maxValue - minValue;
        double percentage = ((double)pixels / width) * 100;
        return ((percentage / 100) * range) + minValue;
    }
    You can set the tooltip by storing the predictedValue in a viewmodel and bind it to the tooltip of the slider.
    public class MainViewModel : ViewModelBase
    {
        private double predictedValue;
        public double PredictedValue
        {
            get
            {
                return this.predictedValue;
            }
            set
            {
                if (this.predictedValue != value)
                {
                    this.predictedValue = value;
                    OnPropertyChanged("PredictedValue");
                }
            }
        }
    }

    <telerik:RadSlider telerik:RadToolTipService.ToolTipContent="{Binding PredictedValue}" />
    For your convenience I prepared a sample project demonstrating this approach. Please give it a try and let me know if is useful.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jose
    Jose avatar
    4 posts
    Member since:
    Sep 2014

    Posted 13 May 2015 in reply to Martin Link to this post

    Thanks Martin! Just what I needed.

     Jose

Back to Top