CODEWITHSUNDEEP
jqueryjquery-ui
FiveTools
FiveTools

Reputation: 6030

How to customize the color of the jquery slider range?

When using the jquery slider, I would like to change the default color of the selected range from grey to blue. 

$(document).ready(function () {

            var slider = $('.slider').slider({
                range: "min",
                min: 0,
                max: 100,
                change: function (e, ui) {
                    //                    $("#img1").fadeOut();
                    //                    alert("done");
                },
                slide: function (e, ui) {
                    var point = ui.value;
                    $("#selected_value").html(point);
                    var width = 100 - point;
                   $("#range").css({ "width": point + "%" });
                }

            });

my html:

<div>
        Min: <span id="selected_value">0</span><br />

    </div>
    <div>
        <div class="slider"><div id="range"></div></div>
    </div>

and my css:

#range
{
    position:absolute;
    height:100%;
    top: 0;
    background-color:Blue;
}

Upvotes: 4

Views: 14933

Answers (3)

jRam90
jRam90

Reputation: 193

If you have a slider range use this in the slider function to change the UI

$("#slider-range .ui-slider-range").css({"background":"#ef2929"});

$("#slider-range .ui-slider-handle").css({"border-color":"#ef2929"});

Upvotes: 0

vinethan
vinethan

Reputation: 21

LOOK AT THIS FOR SOLUTION

.ui-widget-header{background-image:none;background-color:#A157A4;}
.ui-widget-content { background: #FFCCCC; }

Upvotes: 2

Jon
Jon

Reputation: 437734

You need to specify this with CSS:

div.ui-slider-range.ui-widget-header {
    background: blue;
}

If you only want to target a subset of your sliders, restrict the selector accordingly.

See it in action.

Upvotes: 10

Related Questions