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

Question

I\'ve been looking around for an answer on how to do this and I can\'t seem to figure it out (even looking at the jquery ui themeing documentation). As I move the slider fr

Answer 1

 $(function() {
   $( "#slider" ).slider({
       min: 0,
       max: 100,
       slide: function( event, ui ) {
               		$("#slider").css('background', 'linear-gradient(90deg, #c75f04 		                                                   '+ui.value+'%, #cccccc 0%)');
                  $( "#price" ).val( "$" + ui.value);
               }
    });
            
});

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id = "slider"></div><br>
Price : <input id="price">

Answer 2

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();
                }
            });

Answer 3

Aram's answer didn't work for me. Also the jsfiddle demo doesn't seem to do what it's supposed to. Here is a more advanced version that does work, and includes multiple colors.

You can fiddle with it and set as many colors and combinations as you'd like:

The HTML:

<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider"></div>

The CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
}
#coloredSlider {
    float: left;
    clear: left;
width: 600px;
    margin: 15px;
}
#coloredSlider .ui-slider-range { 
    background: #ff0000; 
}

#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default {
    background: none;
    background-color: #FFF;
}

The Javascript:

function getTheColor( colorVal ) {
    var theColor = "";
    if ( colorVal < 50 ) {
                myRed = 255;
                myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
          }
      else  {
                myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
                myGreen = 255;
          }
      theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
    return( theColor ); 
}

function refreshSwatch() {
    var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
    myColor = getTheColor( coloredSlider );

    $( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );

    $( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
}

$(function() {
      $( "#coloredSlider" ).slider({
            orientation: "horizontal",
            range: "min",
            max: 100,
            value: 0,
            slide: refreshSwatch,
            change: refreshSwatch
      });
});

DEMO: http://codepen.io/anon/pen/obWzaQ

Answer 4

Try this:

.ui-widget-content { background: purple; }

As a bonus, if you want to change the color of the little drag handle, use this:

.ui-widget-content .ui-state-default { background: chartreuse; }