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

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

    Any help will be appreciated.
    Thank you.
  2. Ianko
    Admin
    Ianko avatar
    1535 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:
    <style>
        /* main region (i.e., left)*/
        .RadSlider .rslHorizontal div.rslTrack {
            background:none;
            background-color:green;
        }
     
     
         /* Range region (i.e, middle)*/
        .RadSlider .rslHorizontal div.rslSelectedregion {
            background:none;
            background-color:yellow;
        }
     
        /* Custom region (i.e., right) */
        .RadSlider .rslHorizontal div.rslRightTrack {
            background-color:red;
            position: absolute;
            top: 0;
            right:0;
        }
     
    </style>
     
    <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">
      </telerik:RadSlider>
     
    <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"));
            sliderMainTrack.append(rightRegion);
     
            calculateWidth(slider);
     
            slider.add_slideRange(calculateWidth);
            slider.add_slide(calculateWidth);
        }
     
        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);
        }
    </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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top