JQuery Time Range Slider

Developer
Casey Hunt
Size
3,055 Kb
Views
66,792
  1. JQuery Time Range Slider Previews
  2. JQuery Time Range Slider HTML Codes
  3. JQuery Time Range Slider CSS Codes
  4. JQuery Time Range Slider JS Codes

How do I make an jquery time range slider?

Thank you to Jeff Weinberg for his answer at: http://stackoverflow.com/questions/2279784/jquery-ui-slider-for-time. What is a jquery time range slider? How do you make a jquery time range slider? This script and codes were developed by Casey Hunt on 19 November 2022, Saturday.

JQuery Time Range Slider Previews
IQ Test

JQuery Time Range Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Time Range Slider</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="time-range"> <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span> </p> <div class="sliders_step1"> <div id="slider-range"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Time Range Slider - Script Codes CSS Codes

#time-range p { font-family:"Arial", sans-serif; font-size:14px; color:#333;
}
.ui-slider-horizontal { height: 8px; background: #D7D7D7; border: 1px solid #BABABA; box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset; clear: both; margin: 8px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
.ui-slider { position: relative; text-align: left;
}
.ui-slider-horizontal .ui-slider-range { top: -1px; height: 100%;
}
.ui-slider .ui-slider-range { position: absolute; z-index: 1; height: 8px; font-size: .7em; display: block; border: 1px solid #5BA8E1; box-shadow: 0 1px 0 #AAD6F6 inset; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; 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: 8px; height: 8px; 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;
}
#slider-range { width: 90%; margin: 0 auto;
}
#time-range { width: 400px;
}

JQuery Time Range Slider - Script Codes JS Codes

$("#slider-range").slider({ range: true, min: 0, max: 1440, step: 15, values: [540, 1020], slide: function (e, ui) { var hours1 = Math.floor(ui.values[0] / 60); var minutes1 = ui.values[0] - (hours1 * 60); if (hours1.length == 1) hours1 = '0' + hours1; if (minutes1.length == 1) minutes1 = '0' + minutes1; if (minutes1 == 0) minutes1 = '00'; if (hours1 >= 12) { if (hours1 == 12) { hours1 = hours1; minutes1 = minutes1 + " PM"; } else { hours1 = hours1 - 12; minutes1 = minutes1 + " PM"; } } else { hours1 = hours1; minutes1 = minutes1 + " AM"; } if (hours1 == 0) { hours1 = 12; minutes1 = minutes1; } $('.slider-time').html(hours1 + ':' + minutes1); var hours2 = Math.floor(ui.values[1] / 60); var minutes2 = ui.values[1] - (hours2 * 60); if (hours2.length == 1) hours2 = '0' + hours2; if (minutes2.length == 1) minutes2 = '0' + minutes2; if (minutes2 == 0) minutes2 = '00'; if (hours2 >= 12) { if (hours2 == 12) { hours2 = hours2; minutes2 = minutes2 + " PM"; } else if (hours2 == 24) { hours2 = 11; minutes2 = "59 PM"; } else { hours2 = hours2 - 12; minutes2 = minutes2 + " PM"; } } else { hours2 = hours2; minutes2 = minutes2 + " AM"; } $('.slider-time2').html(hours2 + ':' + minutes2); }
});
JQuery Time Range Slider - Script Codes
JQuery Time Range Slider - Script Codes
Home Page Home
Developer Casey Hunt
Username caseymhunt
Uploaded November 19, 2022
Rating 3.5
Size 3,055 Kb
Views 66,792
Do you need developer help for JQuery Time Range Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Casey Hunt (caseymhunt) Script Codes
Name
Spotlight Animation
Cool Form Labels
Neural Colors
Super cool hover section links
Headroom.js Test
IOS Style Underline
A Pen by Casey Hunt
RoundUp Rumble 2015
Shaun Spills
CSS Only radio image label
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!