Multiple jquery sliders not taking styles

I have a multiple jQuery slider and write custom style for that , in my slider if one slider increases the other sliders should decreases and write custom style for these sliders and its not taking those styles anymore. I wrote custom style like .slider_class .ui-widget-content {... } but it takes default style .ui-widget-content {... }

 drawSlider: function(elementId, sliderMax, sliderVal) {    

  $(".slider_class").each(function() {
  $( this ).empty().slider({
        ra开发者_StackOverflow社区nge: "max",
        min: 0,
        max: sliderMax,
        value: sliderVal,
        step: 100,
     slide: function(event, ui) {
        // Update display to current value
        $(this).siblings().text(ui.value);

    var total = 0;

    $(".slider_class").not(this).each(function() {
        total += $(this).slider("option", "value");
    });

    total += ui.value;
    var max = sliderMax - total;
    // Update each slider
    $(".slider_class").not(this).each(function() {

        var t = $(this),
        value = t.slider("option", "value");
        t.slider("option", "max", max + value)
            .siblings().text(value + '/' + (max + value));
        t.slider('value', value);

                  });
     }
});

});


    // code for dynamically displaying the slider 

    $('#account-wrapper-holder').append('<div class="account-wrapper">' +
                        '<h6>' + aName[j] + ':' + aNum[j] + '</h6>' +
                        '<p><span id="text-tot-allocate-value' + aName[j] + aNum[j] + '">Current cash balance: $' + balanceRange[j] + '</span>' +
                        '<span>Total to allocate:<input type="text" id="tot-allocate-value' + aName[j] + aNum[j] + '" value="' + balanceRange[j] + '" onchange="s.setValue(parseInt(this.value))"/></span></p>' +
                        '<div class="slider_class" id="slider-' + aName[j] + aNum[j] + '"></div>' +
                        '<span class="value">0</span><span class="var-account-total-balance" style="float:right;">$0</span></div>'
                    );

                    _this.drawSlider('slider-' + aName[j] + aNum[j] + '', sumOfCurrencyBalances, balanceRange[j]);

I am going to presume your markup looks like this,

<span class="slider_class ui-widget-content">
   ...
</span>

In which case the correct css selector would be

.slider_class.ui-widget-content {... }

Note the lack of a space.

If this is not the case, post your markup.

Edited jsFiddle