Change background color of JQuery slider

Question

I understand I can set the background color of the value from min to the current slider selection by doing a:

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

How do I set the background color for the entire slider (not just from the min or max to the selected value)

Answer 1

i tried some of the other answers, but none of them seemed to work by themselves. this worked for me to get both the range and the rest of the slider to be the same color:

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

Answer 2

an image is applied by the jquery ui css, which hides any background-color applied to the slider elements. simply specify background-image as none in your own style after jquery css is loaded. i'm trying to dynamically set the color of ui-slider-range (per slider on html page) depending on ui.value, and not having much luck setting it in slide option during slider creation.

Answer 3

This seems like it might impact other UI elements if you have them, but in my case it's not a problem, and this worked:

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

As a bonus, if you want to change the color of the little drag handle, use:

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

(The color scheme presented is for demonstration purposes only. :)

NOTE: I figured this out in Chrome using the following procedure:

1. Open Developer Tools
2. Pick the Elements tab, and select the slider background with the magnifying glass tool
3. Find background-color in the "Computed Styles" and expand it with the little triangle
4. Click the link (eg jquery-ui.css:62 ) on the right side to see the relevant line of css
5. Copy that line and place it in your stylesheet, with content you like

Answer 4

Thought these values might be useful for people reading this topic later. These settings were used within a jQuery Slider, with 2 sliders on. 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 SLIDER BACKGROUND

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

BETWEEN 2 MARKER COLOUR

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

For your purpose you have to make jQuery slider background transparent and set the background color directly in your container element. Something like this:

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

This will set the slider background color to your color and override any jQuery slider CSS color.

Answer 6

I haven't looked, but I'd guess that:

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

would work. Assuming that the #slider element is what I think it is.

---

Edited:

Sorry for taking so long on this, having looked at the jQueryUI's demos (particularly for the color-picker: http://jqueryui.com/demos/slider/#colorpicker ) it seems that the background-color property seems to be applied via additional classes applied to the element.

Changing the class from ui-slider-range to ui-slider-range-max seemed promising, but achieved nothing (except from, perhaps, the obvious flipping the coloured area around).

This is weird.

Answer 7

CSS:

• Use this with Classes:

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

• or this for 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 8

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

will color the entire range of all sliders. Restrict if necessary.

Answer 9

give style to the div of the slider, remember to give background-image: none; and then give colour u want!!

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

The answer to this is setting background image to none before setting up your own color. Find the class name with element inspection with chrome!

Answer 11

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

Answer 12

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

});

Important is here range: "max" which shows the background of slider increasing order if want decrease then use "min" and in the theme css .ui-widget-content attribute have to cange in desired color like background: #3E8FFF .