Cambiando el color de un control deslizante jquery ui mientras lo desliza

Question

He estado buscando una respuesta sobre cómo hacer esto y parece que no puedo resolverlo (incluso mirando la documentación del tema jquery ui). A medida que muevo el control deslizante de izquierda a derecha, quiero que la sección en el lado izquierdo del control deslizante cambie a naranja (en lugar de gris predeterminado).

El tema de jquery-roll generó el css a continuación. Es de suponer que el .ui-widget-header-background-color controlaría esto, pero parece que no. Tampoco lo hace agregar un color de fondo a cualquier otra clase. ¿Alguna idea de cómo soluciono esto para que a medida que te deslizas horizontalmente obtengas un color diferente?

JQUERY:

$(document).ready(function(){ 

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

     $("#tasks_done").slider({ 
      value: 5, 
      min: 0, 
      max: 1000, 
      step: 10, 
      slide: function() { 
       update(); 
      } 
     }); 

HTML:

Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours 

    <div id="tasks_time"> 
    </div> 

CSS:

.ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; } 
.ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } 

.ui-slider { position: relative; text-align: left; } 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: .8em; } 
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0;} 

Aquí es an example

Gracias de antemano por su ayuda!

Answer 1

Ther es un ejemplo

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

y un código de jQuery ......

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

Answer 2

Prueba esto:

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

Como beneficio adicional, si desea cambiar el color del pequeño control de arrastre, use esto:

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

Answer 3

La respuesta de Aram no funcionó para mí. Además, la demostración de jsfiddle no parece hacer lo que se supone que debe hacer. Aquí hay una versión más avanzada que funciona, e incluye varios colores.

Puede jugar con él y establecer como muchos colores y combinaciones como desee:

El HTML:

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

El 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; 
} 

El 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

$(function() { 
 
    $("#slider").slider({ 
 
     min: 0, 
 
     max: 100, 
 
     slide: function(event, ui) { 
 
       \t \t $("#slider").css('background', 'linear-gradient(90deg, #c75f04 \t \t             '+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">