0

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!

Community
  • 1
  • 1
nata.inc
  • 31
  • 7
  • 2
    Please post a complete code example of what you're doing, and when possible accompany that with a jsFiddle.net example. – j08691 Apr 04 '14 at 13:57
  • did a small fiddle and found out that range: "min" is the element which seems to control the grey background. [jsfiddle](http://jsfiddle.net/YHm42/) – nata.inc Apr 04 '14 at 14:42

3 Answers3

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, }); }

nata.inc
  • 31
  • 7
0

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/

Mike
  • 62
  • 6
  • thanks for the response but the issue lies with the default grey background which is not working even with the range : "min" value being set. – nata.inc Apr 04 '14 at 14:53
  • yes precisely. The reason was that the range was specified while the slider was in disabled mode but not set while the slider was enabled. provided a sample code for better understanding the solution. – nata.inc Apr 07 '14 at 15:24
0

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/
Alistair Laing
  • 983
  • 1
  • 7
  • 18
  • the html that i provided does indeed have that id. To be more precise, the slider functionality is working fine except that the grey background does not appear on sliding the slider. – nata.inc Apr 04 '14 at 14:41