CODEWITHSUNDEEP
jqueryasp.netjquery-ui
benjamin54
benjamin54

Reputation: 1300

Need to add CSS to jQuery slider

I'm using this slider: http://docs.jquery.com/UI/Slider

I need to change the colors of slider handle & slider bar. Since I'm new to jQuery, I'm not able to figure out how to do it. Can anybody help?

Upvotes: 0

Views: 366

Answers (3)

Nikola
Nikola

Reputation: 15038

Actually, I ran into the same problem and this is how I've solved it:

My html markup was this:

<div id="slider" class="hidden">
    <input type="text" id="sliderAmount" value="30% to 90%" readonly="readonly"/>               
</div>

I manually added the class to the handle bar with jQuery like this:

$(document).ready(function(){
    $("#slider a").addClass("myClassForSliderHandle");
});

which, when you look at the code (inspect element in chrome) looks like this (because the jQueryUI turns the handle bar into the a tag):

<a class="ui-slider-handle ui-state-default ui-corner-all myClassForSliderHandle" href="#"></a>

and I added this in my css file:

.myClassForSliderHandle {
    background-color: yellow !important;
    background-image: none !important;
}

and this is the result I got: enter image description here

Originaly, I was using theme blitzer which as you can see on this link doesn't have the yellow handlebars.

edit: how to change the slider color: If you look at the class (I use inspect element in Chrome browser) which is applied to the slider you see this:

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: #C00 url(images/ui-bg_highlight-soft_15_cc0000_1x100.png) 50% 50%         repeat-x;
    color: white;
    font-weight: bold;
}

Now, in order to change the color of the slider you have to remove the background image, just try it like this (I tried and it works):

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: green;
    color: white;
    font-weight: bold;
}

This class is located in the jQuery UI css file (in my case jquery-ui-1.8.16.custom.css).

Hope this now resolves your problem.

Upvotes: 1

Maksim Vi.
Maksim Vi.

Reputation: 9225

The easiest solution for you is to use jQueryUI themeroller. Just create your own styles there and click on "Download Theme" when you're done. It will let you download your custom styled jQueryUI library.

Alternatively you will have to override CSS for specific jQueryUI classes, but it can become really complicated.

Upvotes: 0

muthu
muthu

Reputation: 5461

You have to override the css class to customize the color which you want or you have to apply the themes provided in the jquery. Try to change the theme in the right corner of the page link. It may useful for you

Upvotes: 0

Related Questions