Cambiar el color de fondo de jQuery deslizador

Question

entiendo que puedo establecer el color de fondo del valor de mínimo a la selección deslizador actual haciendo una:

#slider .ui-slider-range { background: #88ac0b; } 

¿Cómo se configura el color de fondo para la toda deslizador (no sólo de la mínimos y máximos para el valor seleccionado)

Answer 1

no he mirado, pero supongo que:

#slider {background-color: #f00; /* or whatever colour you want */ } 

funcionaría. Suponiendo que el elemento #slider es lo que creo que es.

---

Editado:

sentimos por tomar tanto tiempo en esto, de haber visto demostraciones de la jQueryUI (en particular para el selector de color: http://jqueryui.com/demos/slider/#colorpicker), parece que la propiedad background-color parece ser aplicado a través de adicionales clases aplicadas al elemento.

Cambiando la clase de ui-slider-range a ui-slider-range-max parecía prometedor, pero no se logró nada (excepto, quizás, por el hecho de voltear el área coloreada).

Esto es extraño.

Answer 2

una imagen es aplicada por el jquery ui css, que oculta cualquier color de fondo aplicado a los elementos del control deslizante. simplemente especifique background-image como none en su propio estilo después de que se cargue jquery css. estoy tratando de establecer dinámicamente el color de ui-slider-range (por control deslizante en la página html) dependiendo de ui.value, y no tener mucha suerte configurándolo en la opción de deslizamiento durante la creación del control deslizante.

Answer 3

$("#slider").slider({ 
    range: "max", 
    min: 1, 
    max: 200, 
    step: 1, 
    slide: function(event, ui) { 
    ....... = ui.value 
    ...... 
    }); 

}); 

Importante es aquí range: "max" que muestra el fondo del deslizador creciente si quiere disminuir a continuación, utilizar "min" y en el css .ui-widget-content atributo tema han de cange en el color deseado como background: #3E8FFF.

Answer 4

esto parece que podría afectar a otros elementos de interfaz de usuario, si los tiene, pero en mi caso no es un problema, y ​​esto funcionó:

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

Como beneficio adicional, si usted quiere cambiar el color de el pequeño manejador de arrastre, utilice:

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

(la combinación de colores que se presenta es sólo para fines de demostración :)

NOTA:. me di cuenta de esto en Chrome utilizando el siguiente procedimiento:

1. Abiertas Herramientas de Desarrollo
2. Recogida en la ficha Elementos, y seleccione el fondo deslizante con la herramienta de lupa
3. Encuentra background-color en los "Estilos Computarizada" y expandirlo con el pequeño triángulo
4. Haga clic en el enlace (ej.jquery-ui.css:62) en el lado derecho de ver la línea correspondiente de css
5. Copia esa línea y lo coloca en la hoja de estilos, con el contenido que usted tiene gusto

Answer 5

cree que estos valores podrían ser útiles para las personas que lean este tema más adelante. Esta configuración se usó dentro de un Control deslizante jQuery, con 2 controles deslizantes activados. Hth.

#slider-container {width:200px;} 
#slider-container #slider-min-value {float:left;margin-top:6px;} 
#slider-container #slider-max-value {float:right;margin-top:6px;} 

Antecedentes RESBALADOR GENERAL

#slider-container .ui-widget-content { border: 1px solid #aaaaaa; background: #dfe5e7;} 

ENTRE 2 marcador de color

#slider-container .ui-widget-header { border: 1px solid #aaaaaa; background: #00caff; } 

MARCADOR

#slider-container .ui-state-default { border: 1px solid #aaaaaa; background: #ffffff; } 
#slider-container .ui-state-default { background-image: url('slider-button.png'); } 

Answer 6

CSS:

• usar esto con las clases:

  .ui-widget-content .sliderTestClass { background: #000000; } 
  

• o presente para los ID:

  #mySlider { background: #000000; } 
  

---

JavaScript:

$('#mySlider').slider({   
    min: -1, 
    max: 1, 
    value: 0, 
    step: 0.1, 
    slide: function() { 
     // do stuff 
    } 
}); 

---

HTML:

<div id="mySlider" class="sliderTestClass"></div> 

Answer 7

He intentado algunas de las otras respuestas, pero ninguno de ellos parecía funcionar por sí mismos. Esto funcionó para mí para conseguir tanto la gama y el resto de la barra de desplazamiento para ser del mismo color:

$("#my-slider").css('background', 'rgb(0,255,0)'); 
$("#my-slider .ui-slider-range").css('background', 'rgb(0,255,0)'); 

Answer 8

.ui-slider { 
background: #88ac0b; 
} 

aportan color a la gama completa de todos los controles deslizantes. Restringir si es necesario.

Answer 9

da estilo al div del control deslizante, recuerda dar imagen de fondo: ninguno; y luego dale el color que quieras !!

CSS

#slider-range{ 
    background-color: rgba(187,145,19,0.2); 
    background-image: none; 
} 

HTML

<div id="slider-range" style="width:430px;"></div> 

Answer 10

Para su propósito que usted tiene que hacer jQuery deslizador fondo transparente y establecer el color de fondo directamente en su elemento contenedor. Algo como esto:

#slider{ background: #88ac0b; } 
.ui-slider-range { background: transparent; } 

Esto fijará el color de fondo deslizante para su color y anular cualquier color deslizador jQuery CSS.

Answer 11

La respuesta a esto es establecer la imagen de fondo en ninguno antes de configurar su propio color. ¡Encuentra el nombre de clase con la inspección de elemento con chrome!

Answer 12

if(true){ 
    $('.ui-slider2-range').css('background-color','red'); 
}else { 
    $('.ui-slider2-range').css('background-color','green'); 
}