[Solved] Slider track color



I would like to adjust the coloring of the track of a slider. Apparently, a simple background color change is easy to implement through a CSS style:

.mysliderstyle .sg-slider {
background: red;

However, what I would ideally like to define is the color between the set starting point and the position chosen by the user. This color should be different for differences to the left and to the right. Is this possible?

A less preferable option would be that the color left and right to the starting point differs.


Thanks for your help.

Bastian Becker asked

    Best answer


    Hi Bastian!

    Because the .sg-slider element is one element (it doesn’t get “split in half” by the slider handle), you’ll find it difficult to apply a different background to each side of the slider handle. CSS unfortunately isn’t that powerful (yet).

    I believe this will require some amount of Javascript to achieve. One possible solution would be to dynamically add a child element to the .sg-slider element, apply a few base styles (position relative, height 100%, border-radius 6px, background-color), and then add an event listener to the .ui-slider-handle element. On mousemove, update the width of the new child element accordingly as the position of the slider handle changes (hint: the “left” positioning of the slider handle is set in percent, which can be applied as the width of the new child element). A more advanced solution might utilize a MutationObserver instead of an event listener, for better performance.

    I hope this information is helpful!

    Nathan - Survey Astronaut answered


      Question stats

      • Active
      • Views2150 times
      • Answers1 answer
      • Followers0 followers