Setting Up the range error in UI slider

Question

I have a script where I need to keep the mid range always fixed for the ui slider.

The scenario is for an appointment of 10 mins, the slider should have the the mid range fixed.

I have done that, but don't know why, the min and max is having a 12 mins difference on the bar.

Say for example, if my timeslot starts from 17.30, the min of the ui slider displays as 17.18

I don't know why, but I can't fix this

Here's my script:

<?php
$slot_data = $this->autoload_model->get_data_From_table("mclinicalperiod","*", "mclinicalperiod.Case = 'Old'")->result_array();
$start_time = $slot_data[0]['TimeFrom'];//17.30
$end_time = $slot_data[0]['TimeTo']; //21.29
?>
<legend>Free SLot</legend>
<div style="width:100%; background-color: #cfcfcf; height:30px">
    <a href="javascript:void(0)" onclick="get_slider_time()">Free Slot (From <?php echo $start_time;?> To <?php echo $end_time;?>)</a>
</div>

<script>
function get_slider_time() {
    $('#silder_container').fadeIn();
    var s_t = "<?php echo $start_time;?>";
    var e_t = "<?php echo $end_time;?>";
    var s_time = parseFloat(s_t*60);
    var e_time = parseFloat(e_t*60);
    var time_min = '<?php echo $time;?>';
    $("#slider").slider({
        range:true,
        //min: parseFloat(s_time+ parseInt(time_min)+2),
        min: parseFloat(s_time),
        //max: parseFloat(e_time + parseInt(time_min)+2),
        max: parseFloat(e_time),
        values:[parseFloat(s_time),parseFloat(s_time + parseInt(time_min))],
        slide: function(e, ui) {
            var index = $(this).children("a").index(ui.handle);
            var next = (index == 0) ? 1 : 0;
            if((ui.values[ 1 ] - ui.values[ 0 ]) >= parseInt(time_min) || (ui.values[ 1 ] - ui.values[ 0 ]) < parseInt(time_min)) {
                var newVal = (index == 0) ? ui.values[ 0 ] + parseInt(time_min) : ui.values[ 1 ] - parseInt(time_min);
                $("#slider").slider("values", next, newVal);
            }
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) 
                hours1= '0' + hours1;
            if(minutes1 < 10) 
                minutes1 = '0' + minutes1;

            if(minutes1 == 0) 
                minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) 
                hours2= '0' + hours2;
            if(minutes2 < 10)
                minutes2 = '0' + minutes2;

            if(minutes2 == 0)
                minutes2 = '00';
            $('#timefrom').val(hours1+':'+minutes1);
            $('#timeto').val(hours2+':'+minutes2);
        }
    });
}
</script>
<div id="silder_container" style="display:none">
    <div>
        <div id="slider"></div>
    </div>
    <input type="text" id="single_surgery" name="single_surgery" readonly value="<?php echo $surgery;?>"/>
    <input type="text" id="timefrom" name="timefrom" readonly placeholder="StartTime"/>
    <input type="text" id="timeto" name="timeto" readonly placeholder="EndTime"/>
</div>

How can I fix this error?

Edit

I am putting my jsfiddle, but it's not working.

http://jsfiddle.net/D7UFS/17/

Answer 1

For future reference: Please provide a working jsFiddle example. I couldn't get your code to work even after removing the PHP tags.

Examining your code, I think the problem lies within your handling the times as decimal numbers.

var s_t = "17.30";
var e_t = "21.29";
var s_time = parseFloat(s_t*60);
var e_time = parseFloat(e_t*60);

Here both times are multiplied with 60, which I believe is meant to convert them into minutes. The error here is that s_t is 17.30, not 17:30, which is 17.3 hours, which in turn is 17 hours and 18 minutes.

You must either convert the original timestamps to their correct values (e.g. 17:30 becomes 17.50) or parse the minute values from the timestamps separately. Note that using precise decimal values gets tricky when using values other than 00, 15, 30, and 45, since one minute is 1/60 of an hour.

EDIT: With this code you can convert the decimals into minutes:

var s_t = "17.30";
var e_t = "21.29";
var s_h = parseInt(s_t);
var e_h = parseInt(e_t);
var s_m = parseInt((s_t-s_h)*100);
var e_m = parseInt((e_t-e_h)*100);
var s_time = s_h*60+s_m;
var e_time = e_h*60+e_m;

First I am extracting the hour value by deducting the integer value of the decimal. Then I am simply multiplying the decimal value by 100, which is the number of minutes desired.