jQuery Time Range slider Get Value using JavaScript

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

  
  <title>Simple jQuery Time Range Slider</title>
  
  
  



index.html – Body part

<div id="live-range-time">
	<p><b>Set Time Range: </b><hr />
	<h3 style="color:green"><span class="slider-time">9:00 AM</span> <b>    to   </b> <span class="slider-time2">5:00 PM</h3>
	</span>
	</p><br />
	<div class="sliders_step1">
		<div id="live-range-slider"></div>
	</div>
	<br />
	<hr />
</div>

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;
}

Example

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.