jQuery Time Range slider Get Value using JavaScript
In this Post We Will Explain About is jQuery Time Range slider Get Value using JavaScript With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to javascript – Time range slider using jqueryExample
In this post we will show you Best way to implement JQuery UI Time Range Slider with Values, hear for Using a jQuery UI Slider to Select a Time Rangewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
jQuery Simple Time Range slider
index.html – Header part
Simple jQuery Time Range Slider
index.html – Body part
Set Time Range:
to
index.js
$("#live-range-slider").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [540, 1020],
slide: function (e, ui) {
var first_hour = Math.floor(ui.values[0] / 60);
var first_minutes = ui.values[0] - (first_hour * 60);
if (first_hour.length == 1) first_hour = '0' + first_hour;
if (first_minutes.length == 1) first_minutes = '0' + first_minutes;
if (first_minutes == 0) first_minutes = '00';
if (first_hour >= 12) {
if (first_hour == 12) {
first_hour = first_hour;
first_minutes = first_minutes + " PM";
} else {
first_hour = first_hour - 12;
first_minutes = first_minutes + " PM";
}
} else {
first_hour = first_hour;
first_minutes = first_minutes + " AM";
}
if (first_hour == 0) {
first_hour = 12;
first_minutes = first_minutes;
}
$('.slider-time').html(first_hour + ':' + first_minutes);
var second_hour = Math.floor(ui.values[1] / 60);
var second_minutes = ui.values[1] - (second_hour * 60);
if (second_hour.length == 1) second_hour = '0' + second_hour;
if (second_minutes.length == 1) second_minutes = '0' + second_minutes;
if (second_minutes == 0) second_minutes = '00';
if (second_hour >= 12) {
if (second_hour == 12) {
second_hour = second_hour;
second_minutes = second_minutes + " PM";
} else if (second_hour == 24) {
second_hour = 11;
second_minutes = "59 PM";
} else {
second_hour = second_hour - 12;
second_minutes = second_minutes + " PM";
}
} else {
second_hour = second_hour;
second_minutes = second_minutes + " AM";
}
$('.slider-time2').html(second_hour + ':' + second_minutes);
}
});
style.css
#live-range-time p {
font-family:"Arial", sans-serif;
font-size:14px;
color:#333;
}
.ui-slider-horizontal {
height: 7px;
background: #D7D7D7;
border: 1px solid #BABABA;
box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
clear: both;
margin: 7px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal .ui-live-range-slider {
top: -1px;
height: 100%;
}
.ui-slider .ui-live-range-slider {
position: absolute;
z-index: 1;
height: 7px;
font-size: .7em;
display: block;
border: 1px solid #5BA8E1;
box-shadow: 0 1px 0 #AAD6F6 inset;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: #81B8F3;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
background-image: linear-gradient(top, #A0D4F5, #81B8F3);
}
.ui-slider .ui-slider-handle {
border-radius: 50%;
background: #F9FBFA;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
background-image: linear-gradient(top, #C7CED6, #F9FBFA);
width: 22px;
height: 22px;
-webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
-moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
-webkit-transition: box-shadow .3s;
-moz-transition: box-shadow .3s;
-o-transition: box-shadow .3s;
transition: box-shadow .3s;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 22px;
height: 22px;
cursor: default;
border: none;
cursor: pointer;
}
.ui-slider .ui-slider-handle:after {
content:"";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -4px;
background: #30A2D2;
-webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
-moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.5em;
margin-left: -.6em;
}
.ui-slider a:focus {
outline:none;
}
#live-range-slider {
width: 90%;
margin: 0 auto;
}
#live-range-time {
width: 400px;
}
I hope you have Got What is jquery-ui-time-range-slider-with-values And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.