Cambiare il colore di scorrimento JQuery

Question

ho capito che posso impostare il colore del valore da min sfondo alla selezione cursore corrente facendo uno sfondo:

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

Come faccio a impostare il colore di sfondo per l'intero cursore (non solo dal minimo o massimo per il valore selezionato)

Answer 1

non ho guardato, ma direi che:

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

funzionerebbe. Supponendo che l'elemento #slider sia ciò che penso sia.

---

Modificato:

spiacenti per così tanto tempo su questo, dopo aver guardato demo del jQueryUI (in particolare per il colore-picker: http://jqueryui.com/demos/slider/#colorpicker) sembra che la proprietà background-color sembra essere applicata tramite aggiuntivo classi applicate all'elemento.

La modifica della classe da ui-slider-range a ui-slider-range-max sembrava promettente, ma non ha ottenuto nulla (eccetto, forse, dall'ovvio capovolgimento dell'area colorata in giro).

Questo è strano.

Answer 2

un'immagine viene applicata da jquery ui css, che nasconde qualsiasi colore di sfondo applicato agli elementi del dispositivo di scorrimento. specifica semplicemente background-image come none nel tuo stile dopo che jquery css è stato caricato. sto provando ad impostare dinamicamente il colore dell'intervallo del cursore ui (per cursore sulla pagina html) a seconda di ui.value, e non avendo molta fortuna nell'impostarlo durante la creazione del cursore.

Answer 3

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

}); 

Importante è qui range: "max" che mostra lo sfondo di scorrimento crescente se vuole diminuire quindi utilizzare "min" e nel tema css .ui-widget-content attributo devono cange nel colore desiderato come background: #3E8FFF.

Answer 4

Questo sembra che potrebbe avere un impatto di altri elementi dell'interfaccia utente se li avete, ma nel mio caso non è un problema, e questo ha funzionato:

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

Come bonus, se si desidera cambiare il colore del la piccola maniglia di trascinamento, utilizzare:

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

(lo schema dei colori è presentato solo a scopo dimostrativo :)

NOTA:. ho capito questo in Chrome utilizzando la seguente procedura:

1. Aperte Developer Tools
2. scegliere la scheda Elementi, e selezionare lo sfondo slider con lo strumento lente d'ingrandimento
3. Trova background-color nelle "Stili calcolate" ed espanderla con il piccolo triangolo
4. Fare clic sul collegamento (esjquery-ui.css:62) sul lato destro per vedere la relativa riga di css
5. Copia quella linea e inserirlo nel vostro foglio di stile, con i contenuti che ti piace

Answer 5

pensato che questi valori potrebbero essere utili per le persone che leggono questo argomento più avanti. Queste impostazioni sono state utilizzate all'interno di un cursore jQuery, con 2 cursori attivi. 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;} 

SLIDER GENERAL BACKGROUND

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

TRA 2 indicatore di colore

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

MARCATORE

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

0.123.

• Utilizzare questo con le classi:

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

• o questo per gli 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

ho provato alcune delle altre risposte, ma nessuno di loro sembrava funzionare da soli. questo ha funzionato per me, per ottenere sia la gamma e il resto del dispositivo di scorrimento per essere dello stesso colore:

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

colorerà l'intera gamma di tutti i cursori. Limitare se necessario.

Answer 9

dare stile al div del cursore, ricordarsi di fornire l'immagine di sfondo: nessuno; e poi dai il colore che vuoi !!

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

per il vostro scopo è necessario effettuare jQuery cursore sfondo trasparente e impostare il colore di sfondo direttamente nel vostro elemento contenitore. Qualcosa di simile a questo:

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

Questo imposterà il colore di sfondo cursore per il colore e sovrascrivere qualsiasi colore cursore CSS jQuery.

Answer 11

La risposta è impostare l'immagine di sfondo su nessuna prima di impostare il proprio colore. Trova il nome della classe con l'ispezione degli elementi con chrome!

Answer 12

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