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;

function init() { 
    init_count ++;
    $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 3: Add handler here
$j('#slider').on("userValuesChanged", function (e, data) {
    handler_count ++;
    $j('#output_handler').html("Handler called! Count = "+handler_count);
});

 
$j("#init").click(init);
init();