Range slider change background color

3 posts, 0 answers
  1. Julie
    Julie avatar
    27 posts
    Member since:
    Dec 2008

    Posted 08 Aug 2009 Link to this post

    Hi Telerik Support,
    Is there a way to change the css for each side of a range slider, for example the range slider which has two handles, the one on the left as you would drag the handle towards the middle would highlight the left of the handle in green.  The handle on the right as you would drag the handle towards the middle would highlight area  right of the handle in red.

    Also is there a way where the two handles can't pass over each other.. I think I am missing something in the documentation on this .
    Thanks in advance for the help
    ~Julie
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 12 Aug 2009 Link to this post

    Hi Julie,
    Regarding your CSS question - yes, it is possible. However, as it is the same HTML element, the only approach that will work, is that you create a custom image that you will use for background of the track element of the slider - the first half of the image will be green and the second half will be red. The area between the two handles is another HTML element - the selection range element. That is why you can style it separately. I have attached a simple page to demonstrate my idea.

    As for your second question - this functionality is not yet available out of the box, but you can achieve this effect with some custom code. Please refer to this online article for information how to do this.

    Sincerely yours,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Julie
    Julie avatar
    27 posts
    Member since:
    Dec 2008

    Posted 13 Aug 2009 Link to this post

    Hi Tsvetie,

    Thanks for the solution unfortunately, I can not have a static track with the two different colors, the color needs to follow the handle as you slide it back and forth.  I came up with a solution using the radsplitter, radpane and radsplitbar and works well, in case anyone else may be in need of the same type of solution.
    Thanks again,
    ~Julie

Back to Top