Color-coding a slider

[GEB]

Is the following possible?  I want to create a horizontal slider with a single point to move.  As the slider is moved, the area to the left of the point will be one color, while the area to the right of the point will be another color.  Each color would extend from the selection point, all the way to their respective end of the slider.  Possible?

[Ivan]

Hi GEB,

Unfortunately, the issue you pointed cannot be solved by initialization in the Properties Window. Instead we should simulate this functionality using a Range-Slider. For example, you can use the following xaml and c# code:

<telerik:RadSlider  x:Name="mySlider" Width="333" Height="33"
    IsSelectionRangeEnabled="True" SelectionStart="0" SelectionEnd="0.5"
    HandlesVisibility="Collapsed" Background="#FF20FF03"
    SelectionStartChanged="mySlider_SelectionStartChanged"/>

private void mySlider_SelectionStartChanged(object sender,
    System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
    if (this.mySlider!=null)
    {
        this.mySlider.SelectionStart = 0;
    }
}

Please give it a try and let me know if more questions arise.

Sincerely yours,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[GEB]

Thanks.  This works great, but I'm only able to change one of the colors using the Background attribute.  Is there any way to change both the color of the range selected, as well as the color of the range not selected (two different colors)?

[Ivan]

Hello GEB,

To accomplish this task you should edit the Template of the RadSlider - more about this process you can find in the following articles:  Tweaking the Theme colors for Telerik Silverlight Controls, Themes - Examples & Documentation.

All the best,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[GEB]

I'm not certain that this will solve my issue.  In my application, it is important that the colors of the slider be changed programitically, and they can be set to virtually any colors the user has stored in a database.  For example, assume that I have a range-slider, and that it represents two sets of values: 1) those within the range, and 2) those outside the range.  The user has associated each of these two sets of values with a color of their choice, representing the objects they will be changing the values for.

Now, the ideal solution would be to essentially have two "Background" elements.  One that would change the color between the selectors, and one that would change the color outside the selectors.  Then, when the slider is displayed, these two colors could easily be set from the code-behind to match the two objects that the user wants to manipulate at that paricular time.

I believe trying to do this through templates is overly complicated or not possible, especially compared to simply having an additional element that represents the background "between" the selectors.

[Nikolay]

Hi GEB,

Thanks for the detailed explanation. I have to agree that you are absolutely right about what you said. It would be really quite flexible if there were properties allowing changing of the colors in the code-behind.  I am, however, afraid that we cannot implement such a feature at this moment. We have other major initiative that we have to complete and we will most probably plan this feature for the Q2 release. I can assure you that we will research the matter and once we find the better solution, we will implement it.

Greetings,
Nick
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.