CODEWITHSUNDEEP
javascriptjquery
mattment
mattment

Reputation: 39

Change time slider to 30 min slots instead of 1 hour

I am using the code below to use a time slider which allows the div to slide from 9am - 8pm in 1 hour slots.

I need to edit the code so that the time slider goes up in 30 mins (half hour) slots instead.

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
        jQuery('#callback_selected').html("9 am");
        var select = jQuery( "#callback" );
        var slider = jQuery( "<div id='slider'></div>" ).insertAfter( select ).slider({
            min: 1,
            max: 12,
            range: "min",
            value: 1,
            slide: function( event, ui ) {
                select[ 0 ].selectedIndex = ui.value - 1;
                $time_int = parseInt(ui.value);
                if (ui.value < 5) {
                    $time_int = $time_int + 8;
                    $time_selected = $time_int + " am";
                }
                else {
                    $time_int = $time_int - 4;
                    $time_selected = $time_int + " pm";
                }
                jQuery('#callback_selected').html($time_selected);
            }
        });
    });
</script>

Upvotes: 0

Views: 1238

Answers (1)

j08691
j08691

Reputation: 207901

Add a step option.

Ex:

min: 1,
max: 12,
range: "min",
value: 1,
step: .5,

Here's a jsFiddle example that shows how you can use the step and handle the ":30" time change.

Upvotes: 2

Related Questions