How to change the Slider selected item on the client with JavaScript

[Fred]

Using the following client script to change the selected value of the slider. However, it does not seem that the "item" or slider "set_value()" function is doing anything. The selected value nor the position of the of the slider changes on the client.

Thank you in advance for any help resolving this issue.

Client Script:

var dateValue = dayjs(selectedDate).format("M/D/YYYY");
var slider = $find("<%=RadSlider1.ClientID%>");
var items = slider.get_items();
for (var i = 0; i < items.length; i++) {
	 var item = items[i];
	 var sliderDate = item.get_value();
	 if (sliderDate == dateValue) {
		 item.set_value(dateValue);
		slider.set_value(dateValue);
		slider.repaint();
		break;
		}
}

Slider Markup

<telerik:RadSlider ID="RadSlider1" runat="server" Skin="Bootstrap" Width="98%" Height="50" Orientation="Horizontal" CssClass="ItemsSlider" OnClientValueChanged="Slider_ValueChanged" AnimationDuration="400" EnableServerSideRendering="true" TrackPosition="BottomRight" ItemType="Item" ThumbsInteractionMode="Push" DataSourceID="dsWeekDays">
	<ItemBinding TextField="WeekdayName" ValueField="WeekdayDate" ToolTipField="WeekdayDate"  />
</telerik:RadSlider>

<asp:SqlDataSource ID="dsWeekDays" runat="server" ConnectionString="<%$ ConnectionStrings:CHPCOMSDB %>" SelectCommand="SELECT WeekdayDate = FORMAT(Weekdaydate, 'M/d/yyyy'), WeekdayName FROM dbo.fx_getLastFiveWeekdays() ORDER BY WeekdayDate" SelectCommandType="Text"></asp:SqlDataSource>

[Attila Antal]

Hi Fred,

The Slider's value is a Decimal type, so you will need to set numbers to this value instead of dates. When the ItemType is set to Item, the value is the index of the item and the item's value. For example, the index of item 3 on the list of 5 is 2.

Example

<telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" ItemType="item" Width="400px"
    Height="70px" AnimationDuration="400" ThumbsInteractionMode="Free" Value="2">
    <Items>
        <telerik:RadSliderItem Text="Mon" Value="1"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="Tue" Value="2"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="Wed" Value="3"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="Thu" Value="4"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="Fri" Value="5"></telerik:RadSliderItem>
    </Items>
</telerik:RadSlider>

You can test this example using the following JS function. E.g. "changeSliderValue(2)`

<script>
    function changeSliderValue(newValue) {
        var slider = $find("<%= RadSlider1.ClientID %>");
        slider.set_value(newValue);
    }
</script>

It is not clear, however, why you would like to change the value when the value changes, e.g setting the value in the ClientValueChanged event handler. Can you please share more details on the scenario so I can see the full picture of what you're trying to achieve? Based on that, I will try to suggest a more optimal implementation.

Regards,
Attila Antal
Progress Telerik

[Fred]

Thank you for your prompt response, Attila,

Here is a full explanation of what I'm attempting to accomplish.

The Slider control is bound to a datasource containing the last 5 weekdays from the current date (Weekday Name as the "text" and the date of each day are the values").  There is also a RadGrid on the page that refreshes with the changing value the slider. There is also a date picker control to give the user the option to select a date beyond (earlier) the values displayed in the slider control.  

The JS code snippet I shared earlier is actually contained withing a DatePicker DateInput-Client_OnValueChanged event. The goal is: If the user enters or select a date from  DatePicker is equal to any of the date values in the slider, the slider will change to that value, then fresh the grid. 

I don't fully understand your solution. Are you suggesting using the item index in the "set_value()" function, rather than the actual item value?   Here is the full client JS:

function Slider_ValueChanged(s, e) {
	var slidervalue = s.get_selectedItem().get_value();
	//Refesh the grid based on the slider selection.
	document.getElementById("<%=hdnDayDate.ClientID%>").value = slidervalue;				  
	__doPostBack("<%=gridPanel1.ClientID%>", "");
}
function dpDayDate_OnChange(s, e) {
	var selectedDate = s.get_selectedDate();
	var contiue = true;
	if (!selectedDate) {
		return;
	}
	var day = dayjs(selectedDate).day();
	var today = new Date();
	if (day == 0 || day == 6) {
		//Only allow weekday dates 
		showtoast2('Weekend Date!', 'Date must be on a weekday.', 'error');
		s.set_selectedDate(null);
		return;
	}
	else if (dayjs(selectedDate).isAfter(today)) {
		//Only allow current to past dates..
		showtoast2("Invalid Date", "Future dates are not allowed.", 'error');
		s.set_selectedDate(null);
		return;
	}
	//Check if the user entered a date already in the slider.
	var dateValue = dayjs(selectedDate).format("M/D/YYYY");
	var slider = $find("<%=RadSlider1.ClientID%>");
	var items = slider.get_items();
	for (var i = 0; i < items.length; i++) {
		var item = items[i];
		var sliderDate = item.get_value();
		if (sliderDate == dateValue) {
			//set the slider value to the date picker value 
			contiue = false;
			item.set_value(dateValue);
			slider.setValue(dateValue, false); //Fires the Slider Change event when value changes.
			s.set_selectedDate(null);
			break;
		}
	}
	if (contiue) {
		document.getElementById("<%=hdnDayDate.ClientID%>").value = dateValue;
		__doPostBack("<%=gridPanel1.ClientID%>", "");
	}
}

 

 

[Attila Antal]

Hi Fred,

Thanks for the clarification. It now makes more sense. Initially I thought the JavaScript code is executed in the OnClientValueChanged="Slider_ValueChanged".

Here is how you can select an item by its value in the Slider:

Loop through the Slider's items, and find the one that has the value you're searching for. Once found, get the index of the item and set that value to the Slider.

Example:

function changeSliderValue(newValue) {
    var slider = $find("<%= RadSlider1.ClientID %>");

    var itemToSelect = slider.get_items().filter(function (item) { return item.get_value() === newValue })[0];

    if (itemToSelect) {
        slider.set_value(itemToSelect.get_index());
    }
}

 

Here is the complete example:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <ClientEvents OnDateSelected="OnDateSelected" />
</telerik:RadDatePicker>

<telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" ItemType="item" Width="500px"
    Height="70px" AnimationDuration="400" ThumbsInteractionMode="Free" Value="2">
    <Items>
        <telerik:RadSliderItem Text="11/5/2025" Value="11/5/2025"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="11/6/2025" Value="11/6/2025"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="11/7/2025" Value="11/7/2025"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="11/8/2025" Value="11/8/2025"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="11/9/2025" Value="11/9/2025"></telerik:RadSliderItem>
    </Items>
</telerik:RadSlider>

<script>
    function OnDateSelected(sender, args) {
        changeSliderValue(args.get_newValue());
    }
    function changeSliderValue(newValue) {
        var slider = $find("<%= RadSlider1.ClientID %>");

        var itemToSelect = slider.get_items().filter(function (item) { return item.get_value() === newValue })[0];

        if (itemToSelect) {
            slider.set_value(itemToSelect.get_index());
        }
    }
</script>

Is this what you're looking for?

[Fred]

Thank you again,

Not exactly. However, your responses did put me on the correct path. I was able to accomplish the goal by using the item index. instead of the actual date value.  (see code snippet).  

Side Note: Telerik did make this a bit confusing. you'd think the set_value() or setValue() functions would actually except the actual value of the slider item. I hope this gets updated in a future release to name the function to "set_selectedIndex()" or include a "select(true)" function on the Slider Item.

var slider = $find("<%=RadSlider1.ClientID%>");
var items = slider.get_items();
for (var i = 0; i < items.length; i++) {
	 var item = items[i];
	 var sliderDateValue = item.get_value();
	 if (sliderDateValue == dateValue) {
	 //set the slider value to the date picker value 
	var itemindex = item.get_index();						
	slider.setValue(itemindex, false); //Fires the Slider Change event when value changes.
	s.set_selectedDate(null); //clear the date picker.
	break;
        }
}