Changing the Color of a Jquery UI Slider as You Slide It

Changing the color of a jquery ui slider as you slide it

ther is a example

http://jsfiddle.net/amkrtchyan/EAaLK/2/

and a jquery code......

          $( "#tasks_time" ).slider({
                range: "min",
                value: 37,
                min: 1,
                max: 700,
                slide: function() {
                    update();
                }
            });

jQuery UI Slider - Change background color ONLY between handlers/sliders/markers

You can add div inside your slider and resize them when you move the handles. With proper css it'll give the effect you're describing. You may need to tweak it a little bit, but this should give you some ideas:

HTML

//You add divs inside your slider, you need four, the last region will be 
/background of slider
<div class="pct-slider" id="mondaySlider">
     <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>  
</div>

CSS

 //Make your divs relative and give them color    
.color-region
    {
        position: relative;
        height: 100%;
        float: left;
    }

.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(2)
{
    background-color: red;
}
.color-region:nth-child(3)
{
    background-color: yellow;
}
.color-region:nth-child(4)
{
    background-color: green;
}

JS

function resize_colors() {
       //you start at 0 
       var cur_pos = 0;
        $(".ui-slider-handle").each(function (i) {
            //for each handle you check position and set width of corresponding color div
            $('.color-region').eq(i).css('width', $(this).position().left - cur_pos)
          //update cur_pos to calculate next color width  
          cur_pos = $(this).position().left;
        })
    }

You'll see it doesn't follow completely on slide event, part of this is because slide event is triggered when it moves only, so when you stop, there's a moment not updating. But maybe if you run resize color on some other event it will give a better result.

See fiddle:http://jsfiddle.net/t4veqohy/1/

Alter Jquery slider handle color after slide

You just have to be as specific (or more specific) than your other rule. .ui-slider .ui-slider-handle is more specific than .updated-handle so it was being ignored.

Just use:

.ui-slider .updated-handle {
    background: red;
}

jsFiddle example

How to set 3 different colors at jQuery UI Slider

If you're looking for a JS solution, this is how I approached the problem, using the "slide" event.

slide: function (event, ui) {
    var totalWidth = $(".slider").width();
    $(".left-color").width((ui.values[0]) / 100 * totalWidth);
},

Jquery range slider change background color

This is the code that change colors on reaching max value of 200.

$("#slider-range").slider({
        range: true,
        min: 0,
        max: 200,
        animate: true,
         values: [25, 75],
        start: function( event, ui ) {
            $(ui.handle).find('.ui-slider-tooltip').fadeIn();
        },

        stop: function( event, ui ) {
            $(ui.handle).find('.ui-slider-tooltip').fadeIn();
        },

        slide: function(event, ui) {
            $(ui.handle).find('.ui-slider-tooltip').text(ui.value+' km/hr');
               $('#YourDiv').css('width', 100 - (ui.values[1]/2) +'%');
        },

        create: function( event, ui ) {
            var tooltip = $('<div class="ui-slider-tooltip" />').css({
                position: 'absolute',
                top: '-28px',
                left: '-1px',
                width:'80px'
            });
            $(event.target).find('.ui-slider-handle').append(tooltip);

            // get handles and set up values
            var firstHandle  = $(event.target).find('.ui-slider-handle')[0];
            var secondHandle = $(event.target).find('.ui-slider-handle')[1];
            firstHandle.firstChild.innerText = 25+' km/hr';
            secondHandle.firstChild.innerText = 75+' km/hr';
        }

JQuery slider change background color and round handlers

here are your solution. Basically, used newest JQuery version, newest JQuery UI. JQuery UI CSS version is the same as yours. You can tweak and use your older versions, it should work as well.

$(document).ready(function() {
  
   $( "#slider-range" ).slider({
     range: true,
     min: 1,
     max: 100,
     values: [ 1, 100 ],
     slide: function( event, ui ) {
       $( "#min" ).val( ui.values[ 0 ] );
       $( "#max" ).val( ui.values[ 1 ] );
     }
   });
 });

body {
   font-family: Verdana, Arial, sans-serif;
   font-size: 12px;
}

#min   {
   width:14px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   border-radius: 50%!important;
}

.ui-slider .ui-slider-handle {
   width: 1.8em!important;
   height: 1.8em!important;
}

.ui-slider-horizontal .ui-slider-handle {
   top: -0.45em!important;
}

.ui-widget-content {
   background: #dddddd!important;
}

.ui-widget-header {
   background: #9ac836!important;

}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form>
   <input type="text" id="min" value="1" readonly style="border:0; display:inline-block;">
   <div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
   <div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
      <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
   </div>
  <input type="text" id="max" value="100" readonly style="border:0; display:inline-block;">
</form>

jQuery UI slider with 3 handlers: Change the color of one only handler and colorise the slider bar

You can simulate the behavior of slider's default range widget.

HTML:

<div id='start-children' class="slider-tracker"></div>
<div id='end-children' class="slider-tracker"></div>
<div id='new-children' class="slider-tracker"></div>
<div id='slider-children'>
   <div class="ui-slider-range ui-corner-all ui-widget-header"></div>
</div>

CSS:

.ui-slider-handle:nth-child(4) {
   background: red;
}

.ui-slider-range {
  background: cyan;
}

And finally the JavaScript:

EDIT: Thanks to TigOldBitties, now updates the range after the widget is created.

var $range = $(".ui-slider-range");

$("#slider-children").slider({
 min: 0,
 max: 99,
 values: [10, 20, 25],
 slide: function(event, ui) {
   $range.css('left', ui.values[0] + '%');
   $range.css('width', (ui.values[1] - ui.values[0]) + '%');

   if (!ui.handle.previousSibling) {
     if (ui.values[0] > ui.values[1]) {
       event.preventDefault();
       return;
     }
   } else if (ui.handle.nextSibling) {
     if (ui.values[1] < ui.values[0]) {
       event.preventDefault();
       return;
     }
   }
 },
 create: function(event, ui) {
   var values = $(this).slider("values");
   $range.css('left', values[0] + '%');
   $range.css('width', (values[1] - values[0]) + '%');
 }
});

Here is a fiddle: https://jsfiddle.net/0jbwbotd/2/

How to customize the color of the jquery slider range?

You need to specify this with CSS:

div.ui-slider-range.ui-widget-header {
    background: blue;
}

If you only want to target a subset of your sliders, restrict the selector accordingly.

See it in action.

Displaying the value of a jQuery UI slider and changing color accordingly

I hope this is what your looking for

$(document).ready(function(){

            function update() {
                var tasks_time = $('#tasks_time').slider('value');

                $("#curr-tasks_time").text(tasks_time);

               if( tasks_time == '1')
                {
                    $('.para').css("color","red");
                }
                 if( tasks_time == '2')
                {
                    $('.para').css("color","blue");
                }

            }

           $( "#tasks_time" ).slider({
                range: "min",
                value: 1,
                min: 1,
                max: 10,
                slide: function() {
                    update();
                }
            });

        });

Fiddle : http://jsfiddle.net/EAaLK/1070/

---

Related Topics