jQDateRangeSlider (default ctor)

by godhong

HTML

<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderMouseTouch.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderDraggable.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderBar.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderHandle.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSliderLabel.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRangeSlider.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQDateRangeSliderHandle.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQDateRangeSlider.js"></script>
<script src="https://raw.github.com/ghusse/jQRangeSlider/master/jQRuler.js"></script>
<article style="padding:50px 20px">
    <div id="slider"></div>
</article>
<button type="button" id="calc">Generate</button>

CSS

/**
 * Theme for jQRangeSlider
 * Inspired by http://cssdeck.com/item/381/itunes-10-storage-bar
 *        and http://cssdeck.com/item/276/pure-css-arrow-with-border-tooltip
 */
 .ui-rangeSlider-withArrows .ui-rangeSlider-container {
    margin: 0 15px;
    -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
}
.ui-rangeSlider-noArrow .ui-rangeSlider-container {
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-left: solid 1px #515862;
    border-right: solid 1px #515862;
    -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
}
.ui-rangeSlider-container {
    height: 30px;
    border-top: solid 1px #232a32;
    border-bottom: solid 1px #6a7179;
    background: #67707F;
    background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #67707F), color-stop(100%, #888DA0));
}
.ui-rangeSlider-arrow {
    width:14px;
    height:30px;
    border-top: solid 1px #232a32;
    border-bottom: solid 1px #6a7179;
    background: #67707F;
    cursor:pointer;
    box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0, 0, 0, 0.5);
    background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #67707F), color-stop(100%, #888DA0));
}
.ui-rangeSlider-leftArrow {
    border-radius:4px 0 0 4px;
    border-left: solid 1px #515862;
}
.ui-rangeSlider-rightArrow {
    border-radius:0 4px 4px 0;
    border-right: solid 1px #515862;
}
.ui-rangeSlider-arrow-inner {
    position: absolute;
    top: 50%;
    border: 10px solid...

JavaScript

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

//alert($("#slider").dateRangeSlider("bounds()[1]"))
$('#calc').click(function () {
    var basicSliderBounds = $("#slider").dateRangeSlider("values");
    console.log(basicSliderBounds.min);
    var min_dateParts=String(basicSliderBounds.min).split(" ")
    var date = new Date(min_dateParts[2], (min_dateParts[1]), min_dateParts[3]);
    console.log(min_dateParts)




})