MouseOver Tooltip at Slider Track Position

[Jose]

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

[Martin Ivanov]

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

[Jose]

Thanks Martin! Just what I needed.

 Jose