Default grey background on slide of jQuery slider

Question

I have implemented the jQuery slider functionality which is not filling the slider with default grey background as i slide it. After firebug'ing the slider, i found that the below piece of HTML was missing in my implementation. To note that the comparison was made with the jQuery example on the jQuery site.

<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div>

Below is the context in which the slider has been implemented.

Javascript

$("#slider-range-min").slider({ range: "min", step: 100, //on slider-stop functionality stop: function(event, ui) { //code goes here }, //on slide functionality slide: function(event, ui) { //code goes here } });

HTML

           <div class="txtcenter">
                <div id="slider-range-min"></div>
            </div>

Question :

1. Is this HTML generated dynamically by the jQuery slider library ?
2. An explanation of its workings.

output from my example

<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 38.5714%;"></a></div>

does not contain the auto-generated div class even though range : "min" has been specified.

Below is a link that replaces default grey with orange background on slide functionality.

changing the color of a jquery ui slider as you slide it!

Answer 1

Before : on page load

function load() { $("#slider-range-min").slider({ range: "min", disabled: true, }); }

function user_action() { $("#slider-range-min").slider({ disabled: true, }); }

After : on user action trigger

function load() { $("#slider-range-min").slider({ range: "min", disabled: true, }); }

function user_action() { $("#slider-range-min").slider({ range: "min", disabled: false, }); }

Answer 2

Based on the Js and the html you provided it woudl not work.

"$("#slider-range-min").slider " is looking for an element with an id of "slider-range-min" your html your provided above that doesn't have that id.

1. Yes it generates its own html that is needed to give you a slider
2. Its all explained here http://api.jqueryui.com/slider/

Answer 3

can you try to put his in your css file (at the bottom)

.ui-widget-header {
background: #cccccc;
}

if it doesnt work you could try this: (not preffered)

.ui-widget-header {
background: #cccccc!important;
}

jQuery

I think you have to set te min, max value. Your now using the getter for the min value. In addition to that you have to create two handle's, with only one there's nothing to use a background on.

try this :

    $( "#slider-range-min" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {

        }
    });

See fiddle: http://jsfiddle.net/ZTeKC/