Hello there,
I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders
in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you.
Java Script Code:
// Time Slider
$("#time_slider").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
slide: slideTime
});
function slideTime(event, ui){
var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60);
var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24);
var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60);
var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24);
$("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1));
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = "AM";
}
else {
time = "PM";
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes + " " + time;
}
slideTime();
//-----------------------------
// Trip Duration
$("#duration_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slideDuration
});
function slideDuration(event, ui){
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);
if(hours.length == 1) hours = '0' + hours;
if(minutes.length == 1) minutes = '0' + minutes;
$("#duration").text(hours+'hrs. '+minutes+'mins. ');
}
slideDuration();
//-----------------------------
// Max Price
$("#price_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slidePrice
});
function slidePrice(event, ui){
var dollars = ui.value;
$("#maxprice").text('$'+dollars);
}
slidePrice();
HTML Code:
<head>
<style>
#slider-range{width:400px;}
#slider-range,#time,#duration,#maxprice {margin:10px;display:block;}
.ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;}
.flights-select {margin: -22px 0px 140px;}
</style>
</head>
<body>
<div class="flights-section-title">Flight Time</div>
<div class="flights-section">
<ul class="inline">
<li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li>
<li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li>
</ul>
<div class="leftnav-dot-divider">
<div id="time_slider"></div>
<span id="time"></span></div>
</div><!-- flight-section-slider -->
<div class="flights-section-title">Max Trip Duration</div>
<div class="flights-section">
<div class="leftnav-dot-divider">
<div id="duration_slider"></div>
<span id="duration">2hrs. 0mins.</span>
</div>
</div><br />
<div class="flights-section-title">Max Price</div>
<div class="flights-section">
<div class="leftnav-dot-divider">
<div id="price_slider"></div><span id="maxprice">$100</span>
</div>
</div><br />
</body
