Hi,
I need to customize telerik slider to obtain something like the attached image.
Any help will be appreciated.
Thank you.
1 Answer, 1 is accepted
0
Ianko
Telerik team
answered on 21 Nov 2014, 12:55 PM
Hello Alberto,
The Slider control does not provide an OOB solution to achieve such layout and functionality.
The main tack region and the middle ones can be easily decorated via CSS, although a right region should be added as a DOM element via custom client-side techniques.
You can examine the following example that demonstrates how you can achieve this:
var region = $(slider.get_element()).find(".rslRightTrack");
var sliderMainTrack = $(slider.get_element()).find(".rslTrack");
var handle = slider.get_dragHandles()[1];
var handleWidth = parseInt($(handle).css("width"),10);
var handlePos = parseInt($(handle).css("left"), 10);
var mainTrackWidth = parseInt(sliderMainTrack.css("width"), 10);
var widthToSet = mainTrackWidth - handlePos - handleWidth + 1;
region.css("width", widthToSet);
}
</script>
Note that this is valid for a horizontal slider. To achieve this in different case, you should further implement the approach used to correspond to the requirements.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.