Slider with 3 coloured ranges

[Alberto Pastorelli]

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

Any help will be appreciated.
Thank you.

[Ianko]

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