-2

I am using two jquery sliders, one with single and another multi handle. It's working okay but I need to show the selected range in a different colour and am unable to find the same in the documentation.

This is how my script looks like:

$(function() {
  $( "#slider-1" ).slider({
     slide: function(event, ui) {
            $(this).css({
                'background': 'rgb(107, 183, 185)'
            });
        }
  });
});

This script does give the background color but to the full slider which is not what I want. I need to change the color for only the selected range.

This is how it looks with the current script:

enter image description here

This is what I am looking for: enter image description here

And for the double handle range selector, this is the script from jquery UI that I am using:

$(function() {
  $( "#slider-3" ).slider({
      range:true,
      min: 0,
      max: 500,
      values: [ 35, 200 ],
      slide: function( event, ui ) {
        $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
  });
  $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
      " - $" + $( "#slider-3" ).slider( "values", 1 ) );
});

This one gives me the result as follows: (I am unable to change the color here)

enter image description here

Yudhishthir Singh
  • 2,941
  • 2
  • 23
  • 42
  • Does this answer your question? [How to style HTML5 range input to have different color before and after slider?](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider) – FluffyKitten Sep 01 '20 at 02:11

1 Answers1

1

You have to do that manually, using some custom CSS.

Here is working snippet :

$(function() {
  $("#slider-1").slider({
    slide: changeRange
  }).append('<div class="highlight"></div>');
});

$('#slider-1').click(changeRange);

function changeRange() {
  let range = $(this).find('span').css("left");
  $(this).find('.highlight').width(range);
}
.highlight {
  background: teal;
  height: 100%;
  width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider-1">
</div>

For double range slider, you just have to modify an element with CSS. Just add this to your css :

#slider-3 .ui-widget-header {
  background: teal;
}
Pranav Rustagi
  • 2,604
  • 1
  • 5
  • 18