CODEWITHSUNDEEP
javascriptjquery
user4488093
user4488093

Reputation:

Jquery ui slider range between times

How can I make a jQuery UI slider in the gaps and to?

For example: from 00:00:00 to 00:30:31

Example here , in Track filter -> Length

Upvotes: 0

Views: 1539

Answers (3)

kano
kano

Reputation: 5926

From the jQuery docs :

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>
<script>
    $(function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
      });
</script>

Edit

Added a time format for the slider

Fiddle

Upvotes: 0

dannyshaw
dannyshaw

Reputation: 368

Modified from jquery ui demo to select time

$(function() {
    function pad(num, size) {
      var s = num+"";
      while (s.length < size) s = "0" + s;
      return s;
    }
    var formatSecs = function(totalsecs) {
      var hour = parseInt( totalsecs / 3600, 10) % 24;
      var min = parseInt( totalsecs / 60, 10) % 60;
      var secs = totalsecs % 60;

      return pad(hour,2)+":"+pad(min,2)+":"+pad(secs,2);
    };

    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 86400,
      values: [ 7200, 72000 ],
      slide: function( event, ui ) {
        var min = ui.values[0]; 
        var max = ui.values[1]; 

        $( "#amount" ).val( formatSecs(min)+" - "+formatSecs(max) );
      }
    });

    $( "#amount" ).val( formatSecs($( "#slider-range" ).slider( "values", 0 ))+" - "+formatSecs($( "#slider-range" ).slider( "values", 1 )) );
    
  });
  .ui-slider-range {
    background: rgb(255, 130, 37);
  }
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<body>
<p>
  <label for="amount">Time range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
</body>

Upvotes: 1

Faiz
Faiz

Reputation: 1019

Refer here

http://jsfiddle.net/4e4sddrf/

Javascript code

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [600, 720],
    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);
    }
});

Upvotes: 0

Related Questions