Ändern Sie die Hintergrundfarbe des JQuery-Schiebereglers

Ich das verstehe kann ich die Hintergrundfarbe der Wert von min auf die aktuelle Schieberegler Auswahl, indem Sie einen:

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

Wie kann ich die Hintergrundfarbe für die gesamte Schieberegler (nicht nur aus den min oder max, um den ausgewählten Wert)

InformationsquelleAutor der Frage DotnetDude | 2010-03-07

  1. 11

    ich habe versucht, einige der anderen Antworten, aber keiner von Ihnen schien, um selbst zu arbeiten. dieser arbeitete für mich, um sowohl die Reichweite und den rest der Schieberegler, um die gleiche Farbe:

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

    InformationsquelleAutor der Antwort Bruce Chu

  2. 8

    einem Bild angewendet wird, indem die jquery-ui-css, die ausgeblendet, die hintergrund-Farbe, die angewendet wird, um die Schieberegler-Elemente. geben Sie einfach den background-image auf none in Ihrem eigenen Stil nach jquery css geladen wird.
    ich versuche, die dynamisch die Farbe des ui-slider-range - (per Schieberegler auf der html-Seite), je nach Benutzeroberfläche.Wert, und nicht mit viel Glück in slide Möglichkeit, während der Schieberegler Schöpfung.

    InformationsquelleAutor der Antwort chris

  3. 6

    Dieser scheint, wie es könnte Auswirkungen auf andere UI-Elemente, wenn Sie Sie haben, aber in meinem Fall ist es nicht ein problem, und das funktionierte:

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

    Als bonus, wenn Sie möchten, ändern Sie die Farbe der kleinen ziehen, verarbeiten, verwenden Sie:

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

    (Das Farbschema präsentiert wird, ist für Demo-Zwecke nur. 🙂

    ANMERKUNG: ich dachte mir, diese in Chrome mithilfe des folgenden Verfahrens:

    1. Open Developer Tools
    2. Wählen Sie die Registerkarte Elemente, und wählen Sie den Schieberegler hintergrund und mit dem Lupe-Werkzeug,
    3. Finden background-color im "Computed Styles" und erweitern Sie es mit dem kleinen Dreieck
    4. Klicken Sie auf den link (z.B. jquery-ui.css:62) auf der rechten Seite finden Sie in der entsprechenden Zeile der css -
    5. Kopieren Sie diese Zeile und legen Sie Sie in Ihrem stylesheet, mit Inhalten, die Sie wie

    InformationsquelleAutor der Antwort Grumdrig

  4. 6

    Meinte, diese Werte könnten sinnvoll sein für Leute die dieses Thema Lesen später.
    Diese Einstellungen wurden innerhalb eines jQuery-Slider, mit 2 Schiebereglern auf. 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;}

    ALLGEMEINE SCHIEBEREGLER 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'); }

    InformationsquelleAutor der Antwort oceanician

  5. 2

    Für Ihren Zweck Sie haben, um jQuery-slider hintergrund transparent und die Hintergrundfarbe direkt in Ihrem container-element.
    So etwas wie dieses:

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

    Damit wird der Schieberegler Hintergrundfarbe, um Ihre Farbe und überschreiben, jQuery slider CSS Farbe.

    InformationsquelleAutor der Antwort Jason

  6. 1

    Habe ich noch nicht geschaut, aber ich Schätze, dass:

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

    funktionieren würde. Unter der Annahme, dass die #slider element ist das, was ich denke, es ist.

    Bearbeitet:

    Sorry für die Aufnahme so lange auf dieser, angeschaut auf der jQueryUI - demos (vor allem für den color-picker: http://jqueryui.com/demos/slider/#colorpicker) es scheint, dass die background-color Eigenschaft zu sein scheint, aufgetragen über zusätzliche Klassen, die auf das element angewendet.

    Ändern Sie die Klasse von ui-slider-range zu ui-slider-range-max schien vielversprechend, aber nichts erreicht (außer, vielleicht, die offensichtliche, durch die gefärbte Fläche um).

    Dies ist seltsam.

    InformationsquelleAutor der Antwort David Thomas

  7. 0

    CSS:

    • Verwenden Sie diese mit Klassen:

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

    • oder diese für die 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>

    InformationsquelleAutor der Antwort BKH

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

    Farbe der gesamten Palette von allen Reglern.
    Schränken Sie, falls nötig.

    InformationsquelleAutor der Antwort jank

  9. 0

    geben Stil zu den div des Schiebers,
    denken Sie daran, geben Sie background-image: none;
    und dann geben Sie die Farbe u wollen!!

    CSS

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

    HTML

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

    InformationsquelleAutor der Antwort Ramyz

  10. 0

    Die Antwort auf diese ist das setzen von background-image auf none, bevor Sie die Einrichtung Ihres eigenen Farbe. Finden Sie den Namen der Klasse mit element Inspektion mit chrome!

    InformationsquelleAutor der Antwort Dimitri

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

    InformationsquelleAutor der Antwort abdelmounaim nejjari

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

});

    Wichtig ist hier range: "max" was zeigt der hintergrund des Schiebereglers erhöhen, um wenn Sie wollen, verringern, verwenden Sie dann "min" und in das Thema css .ui-widget-content - Attribut haben, um cange in der gewünschten Farbe wie background: #3E8FFF.

    InformationsquelleAutor der Antwort Deepak Sharma Khandal

Schreibe einen Kommentar