jQDateRangeSlider (default ctor)

by AnnaGerber

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<article style="padding:50px 20px">

<div id="slider"></div>
<div id="now-btn">NOW</div>
</article>

CSS

article {
    background-color: rgb(45, 49, 70);

}
#now-btn {
    float:right;
    margin-right:4px;
    font-size:12px;
    font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    color:white;
}
.ui-rangeSlider-label {
    box-shadow:none;
    font-size: 12px;
    cursor: col-resize;
    max-width: 40px;
    text-align: center;
    font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif;
    background:white;
    color:#333;
    border-right:1px solid rgb(45, 49, 70);
}
.ui-rangeSlider-container, .ui-rangeSlider-innerBar, .ui-rangeSlider-bar  {
    height:15px;
}
.ui-ruler-tick {
    border-left: 1px solid #aaa
}
.ui-rangeSlider .ui-ruler-scale2 .ui-ruler-tick-inner {
    height:2px
}
.ui-ruler-tick-label {
    color:#aaa;
    bottom:auto;
    top:0;
    font-size:8px;
}
.ui-rangeSlider-bar {
    border-radius:3px;
    background: rgb(23, 137, 207);
    box-shadow: none;
    margin:0 15px;
    border-right: 1px solid rgb(23,137,207);
    border-left: 1px solid rgb(23,137,207);
}
.ui-rangeSlider-innerBar {
    border-radius:3px;
    background:white;
}
.ui-rangeSlider-label-inner {
    border-top-color: white;
}

JavaScript

var sliderMax = 1436402183048;
var sliderMin = 1435797383048;

$("#slider").dateRangeSlider(

    {
        arrows:false,
        bounds: {
            min: moment(sliderMin),
            max: moment(sliderMax)  
        },
        defaultValues: {
            min: moment(sliderMin), 
            max: moment(sliderMax) 
        },
        formatter: function(val){
            console.log(moment(val))
            return moment(val).format('DD MMM h:mmA');
        },
        step:{
            minutes: 5
        },
        scales: [{
          first: function(value){ 
              return value; 
          },

          next: function(value){
            return moment(value).add(1,'d');
          },
          label: function(value){
            return moment(value).format('Do');
          }
        },
          {
          first: function(value){ 
              return moment(value).add(12,'h'); 
          },

          next: function(value){
            return moment(value).add(1,'d');
          },
          label: function(value){
            return null;
          }
        },      
                ]
    }
);