jQDateRangeSlider (default ctor)

by SpaceDog

HTML

<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<article style="padding:50px 20px">

<div id="slider"></div>
<button id="init">init()</button>
<span id='output_handler'>Handler Not Called</span>
    <strong>|</strong>
<span id='output_init'>Init Not Called</span>
</article>

CSS

#init { 
    margin: 20px 20px;
}

JavaScript

$j = jQuery.noConflict();
var handler_count = 0;
var init_count = 0;
var is_init = false;
function init() { 
    init_count ++;
    // Option 1:
    // $j("#slider").dateRangeSlider("destroy");
    $j('#output_init').html("Init called! Count = "+init_count);
    var s = $j("#slider").dateRangeSlider({
        bounds:{
          min: new Date(2012, 08, 01),
          max: new Date(2014, 08, 01)
        },
        defaultValues:{
          min: new Date(2013, 04, 05),
          max: new Date(2013, 06, 07)
        } 
    });
    
    $j("#slider").dateRangeSlider("min", new Date(2013, 01, 01));
    $j("#slider").dateRangeSlider("max", new Date(2013, 12, 31));

    // Option 2 
    // if (!is_init) 
    // {
        $j('#slider').on("userValuesChanged", function (e, data) {
            handler_count ++;
            $j('#output_handler').html("Handler called! Count = "+handler_count);
        });
        is_init = true;
    // } 
    // (End of option 2) 
}
$j("#init").click(init);
init();