Jquery Time Slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Laravel</title>
<style>
/*--------Range Slider------*/
.ui-slider-containers {
display: flex;
align-items: center;
justify-content: center;
}
.ui-slider-horizontal
{
height: 10px !important;
background-image: linear-gradient(
to right,
yellow,
orange,
blue,
indigo
) !important;
border-style: none !important;
cursor:pointer !important;
}
.slider-time-data {
display: block;
height: 30px;
background: transparent;
line-height: 30px;
text-align: center;
padding-top: 12px;
margin: auto;
color: #343b57;
font-size: 20px;
font-family: Roboto, sans-serif;
}
#time-range {
width: 80%;
padding: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out
}
.ui-slider .ui-slider-handle {
border-radius: 10% !important;
background: #f9fbfa !important;
border: 2px solid #434343 !important;
background-size: 100% !important;
background: #0d9786 !important;
width: 21px !important;
height: 31px !important;
margin-top: -5.2px !important;
cursor:pointer !important;
}
#slider_time_info{
font-weight: bold;
}
.ui-slider-horizontal:hover{
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
#range-slider {
width: 100%;
margin-top: 20px;
}
.slider-ticks {
position: relative;
margin-top: 10px;
width: 100%;
height: 10px;
background: linear-gradient(to right, transparent 0%, transparent 100%);
}
.slider-tick {
position: absolute;
width: 1px;
height: 15px;
background-color: #000;
}
.slider-tick2 {
position: absolute;
width: 1px;
height: 10px;
text-align:center;
background-color: #000;
}
</style>
</head>
<body>
<div class="ui-slider-containers">
<div id="time-range">
<div id="range-slider"></div>
<span class="slider-time-data">
<span id="slider_time_info">0:00 AM</span>
</span>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#range-slider").slider({
min: 0,
max: 1440,
step: 15,
values: [0],
create: function () {
generateTicks();
},
slide: function (e, ui) {
var sliderUpdateTime = minuteToTimes(ui.values[0]);
$('#slider_time_info').html(sliderUpdateTime);
},
stop: function (e, ui) {
// getNewDateWiseTimezones(ui.values[0]);
}
});
});
function generateTicks()
{
var slider = $("#range-slider");
var min = slider.slider("option", "min");
var max = slider.slider("option", "max");
var step = slider.slider("option", "step");
var tickCount = (max - min) / step;
var container = $('<div class="slider-ticks"></div>');
for (var i = 0; i <= tickCount; i++) {
var tickPosition = (i / tickCount) * 100;
if(i%4 == 0){
var tick = $('<div class="slider-tick"></div>').css('left', tickPosition + '%');
}else{
var tick = $('<div class="slider-tick2"></div>').css('left', tickPosition + '%');
}
container.append(tick);
}
slider.after(container);
}
function minuteToTimes(time_minutes)
{
var hours = Math.floor(time_minutes / 60);
var minutes = time_minutes % 60;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
var period = ((hours >= 12) && (hours != 24 ))? 'PM' : 'AM';
hours = (hours % 12) || 12;
return (hours + ':' + minutes + ' ' + period);
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</html>