jQDateRangeSlider

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>

</article>

JavaScript

//$("#slider").dateRangeSlider();

//$("#slider").bind("valuesChanged", function(e, data){
  //alert("Will be executed");
//});

/*var i = 0

function step() {
    alert('hello world');
    return i++;
}

$("#slider").dateRangeSlider({
    range: {
        min: new Date(2012, 2, 12)//,
        //max: new Date(2012, 0, 12)
    },
    bounds: {
        min: new Date(2012, 1, 10),
        max: new Date(2012, 7, 31)
    },
    step:{
        days: step()
    },
    defaultValues: {
        min: new Date(2012, 3, 15),
        max: new Date(2015, 11, 31)
    },
    formatter: function(val){
        var days = val.getDate(),
            month = val.getMonth() + 1,
            year = val.getFullYear();
        return days + "/" + month + "/" + year;
    }
});*/



$("#slider").dateRangeSlider({
    //symmetricPositionning: true,
    range: {
        min: 1,
        max: 3
    },
    bounds: {
        min: 0,
        max: 3
    },
    
});