Slider with 3 coloured ranges

2 posts, 0 answers
  1. Alberto Pastorelli
    Alberto Pastorelli avatar
    5 posts
    Member since:
    Jul 2012

    Posted 19 Nov 2014 Link to this post

    I need to customize telerik slider to obtain something like the attached image.

    Any help will be appreciated.
    Thank you.
  2. Ianko
    Ianko avatar
    1507 posts

    Posted 21 Nov 2014 Link to this post

    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:
        /* main region (i.e., left)*/
        .RadSlider .rslHorizontal div.rslTrack {
         /* Range region (i.e, middle)*/
        .RadSlider .rslHorizontal div.rslSelectedregion {
        /* Custom region (i.e., right) */
        .RadSlider .rslHorizontal div.rslRightTrack {
            position: absolute;
            top: 0;
    <telerik:RadSlider runat="server" ID="RadSlider2" CssClass="dragRangeSlider" Width="450px"
           Height="45px" TrackPosition="TopLeft" IsSelectionRangeEnabled="true" MinimumValue="0"
           MaximumValue="300" SmallChange="10" LargeChange="100" SelectionStart="100" SelectionEnd="200"
           EnableDragRange="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
           ItemType="Tick" EnableServerSideRendering="true" OnClientLoad="OnClientLoad">
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            var $ = $telerik.$;
            var slider = sender;
            var sliderMainTrack = $(slider.get_element()).find(".rslTrack");
            var rightRegion = $("<div id='RadSliderTrack_" + slider.get_id() + "' class='rslRightTrack' />");
            rightRegion.css("height", sliderMainTrack.css("height"));
        function calculateWidth(slider) {
            var $ = $telerik.$;
            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);

    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.


    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.

  3. DevCraft R3 2016 release webinar banner
Back to Top