JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<script src="http://refreshless.com/nouislider/compile/result/jquery.nouislider.min.js"></script>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<span id="event-start"></span>
<span id="event-end"></span>

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

CSS

#daterange-slider {
    margin: 50px;
}

JavaScript

var
weekdays = [
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
months = [
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"        
];

function ordinal (d) {
  if(d>3 && d<21) return 'th';
  switch (d % 10) {
        case 1:  return "st";
        case 2:  return "nd";
        case 3:  return "rd";
        default: return "th";
    }
}

function intDate(str){
    return new Date(str).getTime();   
}

function formatDate ( date ) {
    return weekdays[date.getDay()] + ", " +
        date.getDate() + ordinal(date.getDate()) + " " +
        months[date.getMonth()] + " " +
        date.getFullYear();
}

function setDate( value ){
    $(this).html(formatDate(new Date(+value)));   
}

$("#daterange-slider").noUiSlider({
    range: {
        min: intDate('2010'),
        max: intDate('2016')
    },
    step: 7 * 24 * 60 * 60 * 1000,
    start: [ intDate('2011'), intDate('2015') ],
    serialization: {
        lower: [
            $.Link({
                target: $("#event-start"),
                method: setDate
            })
        ],
        format: {
            decimals: 0   
        }
    }
});