noUiSlider 8.2.1 base

by Osama Qassar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>
<div id="slider-date"></div>
<span class="example-val" id="event-start"></span>
<span class="example-val" id="event-end"></span>

CSS

body {
    padding: 50px;
    max-width: 300px;
    margin: 0 auto;
}
#slider-date {
    margin-bottom: 30px;
}
.example-val {
    width: 100%;
    clear: both;
    float: left;
    margin: 10px 0;
    text-align: center;
    font-family: 'Arial';
}

JavaScript

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

// weekdays and months
var
    weekdays = [
        "Domingo", "Segunda-feira", "Terça-feira",
        "Quarta-feira", "Quinta-feira", "Sexta-feira",
        "Sábado"
    ],
    months = [
        "Janeiro", "Fevereiro", "Março",
        "Abril", "Maio", "Junho", "Julho",
        "Agosto", "Setembro", "Outubro",
        "November", "Dezembro"
    ];

// portuguese day format
function nth (d) {
    if(d>0 && d<2) return 'º de';
    if(d>1) return ' de';
}

function formatDate ( date ) {
    return weekdays[date.getDay()] + ", " +
        date.getDate() + nth(date.getDate()) + " " +
        months[date.getMonth()] + " " +
        date.getFullYear();
}
        
var date = new Date();

// set previous month
var previousMonth = new Date();
previousMonth.setMonth(previousMonth.getMonth() - 1);

var dateSlider = document.getElementById('slider-date');
var aaa = ["Mbit","Gbit","Mbit","Mbit","Mbit","Mbit",]
function toFormat ( v ) {
 return aaa[v];
}

// nouislider settings
noUiSlider.create(dateSlider, {
    behaviour: 'tap',
    connect: true,
    tooltips: [ true, true ],
    format: { to: toFormat, from: Number },
    range: {
        min: 0,
        max:6
    },
    step:1,
    start: [timestamp(previousMonth), timestamp(date)]
});
        
// get range infos at html          
/* var dateValues = [
    document.getElementById('event-start'), document.getElementById('event-end')
]; */

/* dateSlider.noUiSlider.on('update', function( values, handle ) {
    dateValues[handle].innerHTML = values[handle];
}); */