Slider handle, clicking on the handle to change the value, and changing the color of the handle

[n/a]

Hi,

I am using the slider in an asp.net webforms environment. 

At the start of the page, the handle is on the middle of the slider, and both side of the sliders are greyed out.

Let say the slider has a maximum range of 10. By default the handle is displayed at 5.

To select 6, the user slide to the right, and to select 4 the user slide to the left. 

When the user slides the handle, then the left part of the handle change to green.

 

If the user wants to select 5, the only way to do it at the moment is to either select 4 or 6 and then back to 5, which is not great at all.

Question 1:

Is it possible to create a onclientclick event on the handle, so when the user click on the handle it register that change as 5.

 

Question 2:

Is it possible to change the colour of the handle depending on the value selected

 

Question 3:

I am using the 'Telerik' skin which display a green colour for the slider selection, would it be possible to change the colour to red, depending on the user selection.

To illustrate my question, in the attachment below I would like to have:

First slider: The handle in a dark grey

Second slider: Has been used, would be great to have  green handle

Third slider: the slider has not been used and the handle is sitting on the middle, clicking on the handle would select the value 3, and the left side of the handler would become green.

 

Thank you for your help.

 

[Peter Milchev]

Hello Anne,

With the simple setup below, the Slider initially shows the selected range, meaning the values from 0 to 5 are green, e.g. selected:

<telerik:RadSlider runat="server" ID="RadSlider1" MinimumValue="0" MaximumValue="10" Value="5" Skin="Telerik"></telerik:RadSlider>

That means you can have the default item pre-selected, hence no need for any workarounds to process the handle element click event.

Regarding the selected area's color, you can use the OnClientValueChanged event and change the color:

<script>
    function OnClientValueChanged(sender, args) {
        var color = "#239500"; // the default color for Telerik skin
        if (args.get_newValue() < 5) {
            color = "red";
        }
        sender._selectedRegionElement.style.backgroundColor = color;
    }
</script>

 

Another option that you can use is setting a CSS class to the Slider itself and then use CSS styles to control the color:

<style>
    .RadSlider .rslSelectedregion {
        background-color: #239500; /* the default color for Telerik skin*/
    }
    /* when the CssClass of the RadSlider is set to "slider-red" */
    .RadSlider.slider-red .rslSelectedregion {
        background-color: red
    }
</style>

 

If that is not your exact case, you can share your whole slider setup and we will see if there is a better approach to achieve the goals.

Regards,
Peter Milchev
Progress Telerik

[n/a]

Hi Peter,

Thank you for your response.

For the question 1, what I want to achieve is the opposite of pre-selected value.

Let's say that the default value of the slider is 0 and has not been selected by the user. 

The user has to select a value, and needs to know that the value has been selected. 

For the user to select the 0 value, it has to slide to 1 before coming back to 0. Which is not great.

It the user has selected 0 there is no visual cue for him to know that he has selected the value 0.

That's why I would like to know if it is possible to:

1) click on the handle for the user to select 0 (avoiding the sliding to 1 then 0)

2) Change the colour of the handle once the value has been selected. So when the value 0 has been selected, the user can see it in the slider.

I hope it makes sense.

Thanks

 

 

[Peter Milchev]

Hello Anne,

One option to achieve the "unselected" state is by adding a CSS class to the RadSlider and use CSS to hide the drag handler. Then, in the OnClientValueChanged event, you remove the CSS class and the handle will appear. 

<style>
    .RadSlider.non-selected .rslDraghandle {
        display: none
    }
</style>
<telerik:RadSlider runat="server" ID="RadSlider1" CssClass="non-selected" OnClientValueChanged="OnClientValueChanged" MinimumValue="0" MaximumValue="10" Skin="Telerik"></telerik:RadSlider>

<script>
    function OnClientValueChanged(sender, args) {
        $telerik.$(sender.get_element()).removeClass("non-selected")
        var color = "#239500"; // the default color for Telerik skin
        if (args.get_newValue() < 5) {
            color = "red";
        }
        sender._selectedRegionElement.style.backgroundColor = color;
    }
</script>

Another option would be to set -1 as the Minimum value and then the user needs to select something between 0 and the max value.

With the same CSS class approach, you can set another custom CSS class that will be used to change the color of the handle once it is visible.

<style>
    .RadSlider.non-selected .rslDraghandle {
        display: none
    }

    .RadSlider.green-handle .rslDraghandle {
        background-color: green;
        background-image: linear-gradient(lightgreen,darkgreen);
    }
</style>
<telerik:RadSlider runat="server" ID="RadSlider1" CssClass="non-selected green-handle" OnClientValueChanged="OnClientValueChanged" MinimumValue="0" MaximumValue="10" Skin="Telerik"></telerik:RadSlider>

 

Another option is to use only JS to control the color. Keep in mind that by default the handle has a background image, so if you do not remove it, the background color will not take effect.

function OnClientValueChanged(sender, args) {
    $telerik.$(sender.get_element()).removeClass("non-selected")
    var color = "#239500"; // the default color for Telerik skin
    if (args.get_newValue() < 5) {
        color = "red";
    }
    sender.get_activeHandle().style.backgroundImage = "linear-gradient(lightgreen,darkgreen)"
    sender._selectedRegionElement.style.backgroundColor = color;

}

Regards,
Peter Milchev
Progress Telerik