jQDateRangeSlider (default ctor)

by Kishore Sahasranaman

HTML

<script src="http://bsmin-co-iis.bs-shipmanagement.com/files/scripts/jQAllRangeSliders-min.js"></script>
<script src="http://bsmin-co-iis.bs-shipmanagement.com/files/scripts/jQAllRangeSliders-withRuler-min.js"></script>
<link rel="stylesheet" href="http://bsmin-co-iis.bs-shipmanagement.com/files/css/classic.css">
<article style="padding:50px 20px;width:250px">

<div id="slider"></div>

</article>

CSS

.ui-rangeSlider-innerBar {
        top: 6px !important;
        height: 3px !important;
        background-color: #94c0d2 !important;
    }

    .ui-rangeSlider .ui-rangeSlider-bar {
        margin: 5px 0 0 0 !important;
        height: 10px !important;
        background-color: #58a5c6 !important;
    }

    .ui-rangeSlider .ui-rangeSlider-handle {
        cursor : pointer;
    width : 4px;
     border: solid 1px #94c0d2;
        background-image: none,linear-gradient(to bottom,#eaf4f9 0,#dbecf4 100%) !important;
    }

        .ui-rangeSlider .ui-rangeSlider-handle:hover {
            background-image: none,linear-gradient(to bottom,#afe4fa 0,#7dd3f6 100%);
        }

    .ui-rangeSlider-arrow {
        border-radius: 10px;
        border: solid 1px #94c0d2;
        background-image: none,linear-gradient(to bottom,#eaf4f9 0,#dbecf4 100%) !important;
    }
    .ui-rangeSlider-leftArrow {
        background: url('../Content/kendo2013Q3514/BlueOpal/sprite.png') #eaf4f9 !important;
        background-position: -16px -48px !important;
        left: -7px !important;
    }
    .ui-rangeSlider-rightArrow {
        background: url('../Content/kendo2013Q3514/BlueOpal/sprite.png') #eaf4f9 !important;
        background-position: -16px -16px !important;
        right: -5px !important;
    }
    .ui-rangeSlider-label-value {
        margin-bottom:0px !important;
        color:#fff;
        font-weight:bold;
    }
    .ui-rangeSlider-label {
        margin: 0 2px 6px;
        background-image: none,linear-gradient(to bottom,#12739d 0,#58a5c6 100%);
        border-radius: 7px;
    }
    .ui-rangeSlider .ui-ruler-scale {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner {
        color: black;
        margin-top: -10px;
        border-left: 1px solid black;
        height: 24px;
        padding-left: 2px;
        position: relative;
    }

    .ui-rangeSlider...

JavaScript

var allmonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var months = ["Jan", "", "", "", "", "", "Jul", "", "", "", "", "Dec"];
  $("#slider").dateRangeSlider({
    bounds: {min: new Date(2011, 0, 1), max: new Date()},
    defaultValues: {min: new Date(2013, 5, 10), max: new Date()},
    scales: [{
      first: function(value){ return value; },
      end: function(value) {return value; },
       next: function(value){
        var next = new Date(value);
        return new Date(next.setYear(value.getFullYear() + 1));
      },
      label: function(value){
        return value.getFullYear();
      },
      format: function(tickContainer, tickStart, tickEnd){
        console.log(tickContainer);
          console.log(tickStart);
          console.log(tickEnd);
          tickContainer.addClass("myCustomClass");
      }
    },
            // Secondary scale
  {
    first: function(val){ return val; },
   next: function(value){
       var next = new Date(value);
        return new Date(next.setMonth(value.getMonth() + 1));
      },
    stop: function(val){ return false; },
    label: function(){ return ""; }
  }]
      ,step:{
    months: 1
  },
      formatter:function(val){
        var days = val.getDate(),
          month = val.getMonth(),
          year = val.getFullYear();
        return allmonths[month] + " " + year;
      },valueLabels: "show", symmetricPositionning: true
  });