This is a migrated thread and some comments may be shown as answers.

Slider with 3 coloured ranges

1 Answer 94 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Alberto Pastorelli
Top achievements
Rank 1
Alberto Pastorelli asked on 19 Nov 2014, 06:08 PM
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

Sort by
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:
<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.

 
Tags
Slider
Asked by
Alberto Pastorelli
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or