Hintergrundfarbe ändert von JQuery Slider

Question

Ich verstehe ich die Hintergrundfarbe des Wertes von min auf die aktuelle Schieberauswahl einstellen, indem Sie ein:

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

Wie richte ich die Hintergrundfarbe für die gesamten Schieber (nicht nur von der min oder max auf den gewählten Wert)

Answer 1

ich habe nicht sah, aber ich würde vermuten, dass:

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

würde funktionieren. Angenommen, dass das #slider Element ist, was ich denke, dass es ist.

---

Edited:

Es tut uns auf diese so lange dauert, auf die Demos der jQueryUI sah zu haben (vor allem für die Farbpicker: http://jqueryui.com/demos/slider/#colorpicker) scheint es, dass die background-color Eigenschaft über zusätzliche angewendet zu werden scheint Klassen auf das Element angewendet.

Das Ändern der Klasse von ui-slider-range zu ui-slider-range-max schien vielversprechend, erreichte aber nichts (außer vielleicht das offensichtliche Umdrehen des farbigen Bereichs).

Das ist komisch.

Answer 2

Ein Bild wird von der jquery ui css angewendet, das die Hintergrundfarbe der Schiebereglerelemente ausblendet. Geben Sie einfach background-image als keins in Ihrem eigenen Stil an, nachdem jquery css geladen wurde. Ich versuche, die Farbe von UI-Slider-Bereich (pro Schieberegler auf HTML-Seite) abhängig von ui.value dynamisch zu setzen, und nicht viel Glück beim Festlegen der Schieberegler-Option während der Slider-Erstellung.

Answer 3

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

}); 

Wichtig ist hier range: "max", die den Hintergrund des Schiebers ansteigender Reihenfolge zeigt, wenn verringern wollen, dann "min" verwenden und in das Thema CSS .ui-widget-content Attribut haben wie background: #3E8FFF in gewünschte Farbe cange.

Answer 4

Dies scheint, wie es andere UI-Elemente auswirken könnten, wenn man sie haben, aber es ist kein Problem, und das funktionierte in meinem Fall:

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

Als Bonus, wenn Sie die Farbe ändern möchten, der kleine Schleppgriff verwenden:

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

(das Farbschema nur zu Demonstrationszwecken dargestellt ist :)

. HINWEIS: ich dies in Chrome heraus mit dem folgende Verfahren:

1. öffnen Developer Tools
2. Wählen Sie die Registerkarte Elemente, und wählen Sie den Schieberegler Hintergrund mit der Lupe Werkzeug
3. background-color finden in den „Computed Styles“ und erweitern Sie es mit dem kleinen Dreieck
4. das Klicken Link (z. B.jquery-ui.css:62) auf der rechten Seite die entsprechende Zeile von CSS
5. kopieren, die Linie und legen Sie sie in Ihrem Stylesheet, um zu sehen, mit Inhalt, den Sie

Answer 5

diese Werte für Menschen könnte nützlich sein Gedanke wie später dieses Thema zu lesen. Diese Einstellungen wurden in einem jQuery-Slider mit 2 Schiebereglern verwendet. 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;} 

GENERAL SCHWEBER HINTERGRUND

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

ZWISCHEN 2 MARKER FARBE

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

• verwenden mit Klassen:

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

• oder diese für IDs:

  #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

Ich habe versucht, einige der anderen Antworten, aber keiner von ihnen schien sich zu arbeiten. das für mich arbeitete sowohl der Bereich und der Rest des Schiebers zu erhalten die gleiche Farbe zu sein:

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

wird die gesamte Bandbreite aller Schieber färben. Beschränken Sie bei Bedarf.

Answer 9

geben Sie dem div des Schiebereglers Stil, erinnern Sie sich, um background-image zu geben: keine; und dann Farbe geben wollen !!

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

Für Ihren Zweck Sie jQuery slider Hintergrund transparent und stellen Sie in Ihrem Container-Element die Hintergrundfarbe direkt zu machen. Etwas wie folgt aus:

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

Dadurch wird der Schieber Hintergrundfarbe zu Ihrer Farbe gesetzt und jede jQuery slider CSS Farbe außer Kraft setzen.

Answer 11

Die Antwort darauf ist das Einstellen des Hintergrundbildes auf Keines, bevor Sie Ihre eigene Farbe einstellen. Suchen Sie den Klassennamen mit der Elementprüfung mit chrome!

Answer 12

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