PDA

View Full Version : JavaScript Slider Issue


buddi03520
10 Mar 2011, 10:42 PM
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">&nbsp;
<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"> &nbsp;
<div class="leftnav-dot-divider">
<div id="price_slider"></div><span id="maxprice">$100</span>
</div>
</div><br />
</body