Issue with Jquery UI Range Slider using same class

I am using Jquery UI Range Slider with same class for multiple time which is i added in snippet, it will working perfect but data value is not displaying for second slider.

It is display after changing slider not when intilize,so please guide me what is mistake i am doing in apply multiple range slider

$(document).ready(function() {
  var initialValues = [540, 1020],
    updateValue = function(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;
      if (minutes == 0) minutes = '00';
      if (hours >= 12) {
        if (hours == 12) {
          hours = hours;
          minutes = minutes + " PM";
        } else {
          hours = hours - 12;
          minutes = minutes + " PM";
        }
      } else {
        hours = hours;
        minutes = minutes + " AM";
      }
      if (hours == 0) {
        hours = 12;
        minutes = minutes;
      }
      $(ui.handle).attr('data-value', hours + ':' + minutes);
    };

  $(".slider-range").slider({
    min: 0,
    max: 1440,
    step: 15,
    range: true,
    values: [540, 1020],
    create: function(event, ui) {
      $.each(initialValues, function(i, v) {
        updateValue({
          value: v,
          handle: $('.ui-slider-handle').eq(i)
        });
      });
    },
    slide: function(event, ui) {
      updateValue(ui);
    }
  });
});

.time-range {
  padding-top: 35px;
}

*:focus {
  outline: 0;
}

.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 #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}

.ui-slider .ui-slider-handle {
  background-color: #424453;
  width: 18px;
  height: 18px;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background: transparent url(https://dummyimage.com/4x20/000/fff.png) 50% 50% no-repeat;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.5em;
  margin-left: -.7em;
}

.ui-slider-handle:after {
  content: attr(data-value);
  position: absolute;
  bottom: -24px;
  left: -20px;
  min-width: 60px;
  font-size: 10px;
  height: 20px;
  color: #333;
  padding: 1px;
  text-align: center;
}

.ui-slider a:focus {
  outline: none;
}

#slider-range {
  width: 95%;
  margin: 0px;
}

.time-range {
  width: 100%;
  margin: 10px 0px;
  display: block;
}

.time-slider-label {
  display: inline-block;
}

.sliders_step1 {
  width: auto;
}

#time-range label {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>

<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>

Solution

You need to find which .slider-range slider you will create first, then search for the .ui-slider-handle inside of it.
You can find which one with .index(): $(".slider-range").index(this)

$(document).ready(function() {
  var initialValues = [540, 1020],
    updateValue = function(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;
      if (minutes == 0) minutes = '00';
      if (hours >= 12) {
        if (hours == 12) {
          hours = hours;
          minutes = minutes + " PM";
        } else {
          hours = hours - 12;
          minutes = minutes + " PM";
        }
      } else {
        hours = hours;
        minutes = minutes + " AM";
      }
      if (hours == 0) {
        hours = 12;
        minutes = minutes;
      }
      
      $(ui.handle).attr('data-value', hours + ':' + minutes);
    };

  $(".slider-range").slider({
    min: 0,
    max: 1440,
    step: 15,
    range: true,
    values: [540, 1020],
    create: function(event, ui) {
      var index = $(".slider-range").index(this);
      $.each(initialValues, function(i, v) {
        updateValue({
          value: v,
          handle: $('.slider-range').eq(index).find('.ui-slider-handle').eq(i)
        });
      });
    },
    slide: function(event, ui) {
      updateValue(ui);
    }
  });
});

.time-range {
  padding-top: 35px;
}

*:focus {
  outline: 0;
}

.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 #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}

.ui-slider .ui-slider-handle {
  background-color: #424453;
  width: 18px;
  height: 18px;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background: transparent url(https://dummyimage.com/4x20/000/fff.png) 50% 50% no-repeat;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.5em;
  margin-left: -.7em;
}

.ui-slider-handle:after {
  content: attr(data-value);
  position: absolute;
  bottom: -24px;
  left: -20px;
  min-width: 60px;
  font-size: 10px;
  height: 20px;
  color: #333;
  padding: 1px;
  text-align: center;
}

.ui-slider a:focus {
  outline: none;
}

#slider-range {
  width: 95%;
  margin: 0px;
}

.time-range {
  width: 100%;
  margin: 10px 0px;
  display: block;
}

.time-slider-label {
  display: inline-block;
}

.sliders_step1 {
  width: auto;
}

#time-range label {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>

<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>