function initSliderLevelsHome()
{

    // Levels slider               
	$("#sldLevel").slider(
	{
		values: [ 0, 6 ],
		range: true,
		min: 0,
		max: 6,
		step: 1,
		slide: function(e, ui)
		{
		    var sliderValues = $("#sldLevel").slider('option', 'values');
            var sliderOneValue = sliderValues[0];
            var sliderTwoValue = sliderValues[1];
            
            if( ( sliderTwoValue - sliderOneValue ) <= 0 )
            {
                return false;
            }
            
		},
		change: function(e, ui) // change gets called on slide stop, but only if the slider position has changed, e and ui, for event and user-interface respectively
		{				    			
			var sliderValues = $("#sldLevel").slider('option', 'values');
            var sliderOneValue = sliderValues[0];
            var sliderTwoValue = sliderValues[1];
            
			
			$(".cbl-level-home :input").each(function(counter)
			{								
				if( counter < sliderTwoValue && counter >= sliderOneValue )
				{
					if(counter == sliderTwoValue)
					{										    
					    if(this.checked) // if already checked
					    {					    					    					    																															
						    // call the trigger on the last one - this will uncheck it
						    $(this).trigger("click");
						    
						    // re-check it
						    this.checked = true;
						}
						else // if not already checked
						{
						    // call the trigger on the last one - this will check it
						    $(this).trigger("click");
						}
						
					}
					else
					{							
						this.checked = true;
					}
				}
				else
				{
					this.checked = false;
				}											
			});										
		}
	});

	// insert overlay after the range
	$("#sldLevel .ui-slider-range").after('<div class = "levels-overlay"><div class="key"><a href="#sldLevel" onclick="return false" class="key-1"><span></span></a><a href="#sldLevel" onclick="return false" class="key-2"><span></span></a><a href="#sldLevel" onclick="return false" class="key-3"><span></span></a><a href="#sldLevel" onclick="return false" class="key-4"><span></span></a></div></div>');
	
	// if js enabled remove the no-js class
	$(".key-levels").removeClass("no-js");
}