Changer la couleur de fond du curseur JQuery

Question

Je comprends que je peux définir la couleur d'arrière-plan de la valeur de min à la sélection actuelle du curseur en faisant une:

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

Comment définir la couleur d'arrière-plan pour la ensemble curseur (non seulement du min ou max à la valeur sélectionnée)

Answer 1

Je ne l'ai pas regardé, mais je suppose que:

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

fonctionnerait. En supposant que l'élément #slider est ce que je pense qu'il est.

---

Modifié:

Désolé pour tant de temps à ce sujet, après avoir regardé les démos de jQueryUI (en particulier pour le sélecteur de couleur: http://jqueryui.com/demos/slider/#colorpicker), il semble que la propriété background-color semble être appliquée par l'intermédiaire supplémentaire classes appliquées à l'élément. Le changement de la classe de ui-slider-range à ui-slider-range-max semblait prometteur, mais n'aboutissait à rien (à l'exception peut-être de l'évidente inversion de la zone colorée).

C'est bizarre.

Answer 2

Une image est appliquée par jquery ui css, qui masque toute couleur de fond appliquée aux éléments du curseur. spécifiez simplement background-image comme aucun dans votre propre style après le chargement de jquery css. J'essaie de définir dynamiquement la couleur de ui-slider-range (par curseur sur la page html) en fonction de ui.value, et de ne pas avoir beaucoup de chance de le régler dans l'option slide lors de la création du slider.

Answer 3

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

}); 

important est ici range: "max" qui montre l'arrière-plan de l'ordre croissant de curseur si vous voulez diminuer puis utilisez "min" et dans le thème .ui-widget-content attribut css doivent cange dans la couleur désirée comme background: #3E8FFF.

Answer 4

Cela semble qu'il pourrait avoir un impact d'autres éléments de l'interface utilisateur si vous les avez, mais dans mon cas, il n'y a pas un problème, et cela a fonctionné:

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

En prime, si vous voulez changer la couleur la petite poignée de déplacement, utilisez:

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

(la palette de couleurs est présenté à des fins de démonstration :)

NOTE:. Je me suis dit cela dans Chrome en utilisant la procédure suivante:

1. outils Open Developer
2. Choisissez l'onglet Éléments, puis sélectionnez l'arrière-plan de curseur avec l'outil loupe
3. Trouver background-color dans les « Styles calculée » et le développer avec le petit triangle
4. Cliquez sur le lien (par exemplejquery-ui.css:62) sur le côté droit de voir la ligne correspondante de
5. css Copier cette ligne et le placer dans votre feuille de style, avec le contenu que vous aimez

Answer 5

La pensée de ces valeurs pourraient être utiles pour les personnes sur ce sujet plus tard. Ces paramètres ont été utilisés dans un curseur jQuery, avec 2 curseurs activés. 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;} 

GLISSEUR GENERAL CONTEXTE

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

ENTRE 2 MARKER COULEUR

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

MARKER

#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:

• utiliser avec les classes:

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

• ou cela pour 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

j'ai essayé quelques-unes des autres réponses, mais aucun d'entre eux ne semblait fonctionner par eux-mêmes. cela a fonctionné pour moi d'obtenir à la fois la portée et le reste du curseur pour être de la même couleur:

$("#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; 
} 

colorera la gamme complète de tous les curseurs. Restreindre si nécessaire.

Answer 9

donnez du style à la div du curseur, n'oubliez pas de donner une image de fond: aucune; et ensuite donner la couleur que vous voulez !!

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

Pour votre but, vous devez faire fond curseur jQuery transparent et définir la couleur d'arrière-plan directement dans votre élément conteneur. Quelque chose comme ceci:

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

Cela définira la couleur de fond de curseur à votre couleur et remplacer toutes les couleurs CSS curseur jQuery.

Answer 11

La réponse à cette question est de définir l'image de fond à aucune avant de définir votre propre couleur. Trouvez le nom de la classe avec l'inspection des éléments avec chrome!

Answer 12

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