title: change time plugin in to 24 hours
body: <p>Currently i am using 12 hours format which means AM,PM concept ,I want to change this timepicker in to 24 hours and remove AM ,PM.</p>
  
  <p>html code</p>
  
  <pre><code>&lt;div id="time-range"&gt;
  &lt;p&gt;Time Range: &lt;span class="slider-time"&gt;9:00 AM&lt;/span&gt; - &lt;span class="slider-time2"&gt;5:00 PM&lt;/span&gt;
  
  &lt;/p&gt;
  &lt;div class="sliders_step1"&gt;
      &lt;div id="slider-range"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  css code</p>
  
  <pre><code>    #time-range p {
      font-family:"Arial", sans-serif;
      font-size:14px;
      color:#333;
  }
  .ui-slider-horizontal {
      height: 8px;
      background: #D7D7D7;
      border: 1px solid #BABABA;
      box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
      clear: both;
      margin: 8px 0;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      border-radius: 6px;
  }
  .ui-slider {
      position: relative;
      text-align: left;
  }
  .ui-slider-horizontal .ui-slider-range {
      top: -1px;
      height: 100%;
  }
  .ui-slider .ui-slider-range {
      position: absolute;
      z-index: 1;
      height: 8px;
      font-size: .7em;
      display: block;
      border: 1px solid #5BA8E1;
      box-shadow: 0 1px 0 #AAD6F6 inset;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
      background: #81B8F3;
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
      background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
      background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
      background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
      background-image: linear-gradient(top, #A0D4F5, #81B8F3);
  }
  .ui-slider .ui-slider-handle {
      border-radius: 50%;
      background: #F9FBFA;
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
      background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
      background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
      background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
      background-image: linear-gradient(top, #C7CED6, #F9FBFA);
      width: 22px;
      height: 22px;
      -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
      -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
      box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
      -webkit-transition: box-shadow .3s;
      -moz-transition: box-shadow .3s;
      -o-transition: box-shadow .3s;
      transition: box-shadow .3s;
  }
  .ui-slider .ui-slider-handle {
      position: absolute;
      z-index: 2;
      width: 22px;
      height: 22px;
      cursor: default;
      border: none;
      cursor: pointer;
  }
  .ui-slider .ui-slider-handle:after {
      content:"";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      top: 50%;
      margin-top: -4px;
      left: 50%;
      margin-left: -4px;
      background: #30A2D2;
      -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
      -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
      box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
  }
  .ui-slider-horizontal .ui-slider-handle {
      top: -.5em;
      margin-left: -.6em;
  }
  .ui-slider a:focus {
      outline:none;
  }
  
  #slider-range {
    width: 90%;
    margin: 0 auto;
  }
  #time-range {
    width: 400px;
  }
  </code></pre>
  
  <p>js code</p>
  
  <pre><code>    $("#slider-range").slider({
      range: true,
      min: 0,
      max: 1440,
      step: 15,
      values: [540, 1020],
      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 &gt;= 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 &gt;= 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);
      }
  });
  </code></pre>
  
  <p>What change can made this timepicker in to 24 hours</p>