JQuery Slider Invisible But Otherwise Working

Question

I am using a jquery slider on my local (desktop) html page, but I am having an issue where the sliders do not show up.

It is supposed to look like this jsfiddle that I wrote: http://jsfiddle.net/RwfFH/143/

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

<span id="ColorScalerTitle">Color Scaling</span>

<div id="red">
    <span id="redScale">1</span>
</div>
<div id="green">
    <span id="greenScale">1</span>
</div>
<div id="blue">
    <span id="blueScale">1</span>
</div>

JAVASCRIPT

$( function() {

    function refreshValues() {
        var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" );
        document.getElementById("redScale").innerHTML=red/100;
        document.getElementById("greenScale").innerHTML=green/100;
        document.getElementById("blueScale").innerHTML=blue/100;
    }

    $( "#red, #green, #blue" ).slider({
        orientation: "horizontal",
        range: "min",
        max: 200,
        value: 100,
        slide: refreshValues,
        change: refreshValues
    });

    $( "#red" ).slider( "value", 100 );
    $( "#green" ).slider( "value", 100 );
    $( "#blue" ).slider( "value", 100 );
});

CSS

#ColorScalerTitle{
   float: left;
   margin-left: 120px;
}

#red, #green, #blue {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}

#redScale, #greenScale, #blueScale {
  margin-left: 320px;
}

#red .ui-slider-range,
#red .ui-slider-handle
{ background: #FF0000; }

#green .ui-slider-range,
#green .ui-slider-handle 
{ border-color: #00FF00; }

#blue .ui-slider-range,
#blue .ui-slider-handle 
{ border-color: #0000FF; }

But on my local code (not using jsfiddle), the sliders do not show. The sliders still work, but show up invisible. My issue is repeatable on jsfiddle by clicking the gear next to JAVASCRIPT, and unchecking jQuery UI 1.9.2, and re-running (as seen here: http://jsfiddle.net/RwfFH/142/)

I am including jquery.min.js and jquery-ui.min.js in my html head, so I'm not sure what the problem is.

Does it have to do with jQuery not being loaded in time? I am using window.addEventListener('DOMContentLoaded', main, false );, where main has my slider code in it.

Answer 1

The slider widget relies on some styles defined in the plugin's css sheet:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

(replace with the appropriate version)

Your fiddle's working fine with the .css file linked in http://jsfiddle.net/7arrsaro/