JQuery UI Range Slider values

Question

I am using JQuery UI Range slider. I have custom css and I wrote some JS for my range to go from 89 to 98 and to show the new value over the handles of my slider. If I move the left handle to 91, I want to set the "91" text over the left handle. Similarly for the right handle.

The problem is that the text values initially are not in the right place, and when I move one of the handles, the value for the other handle disappears.

Here is the code

Any ideas?

user_10606400 · Answer

You can use each loop to iterate through your span tag which is inside slider .Then , using index value which will be 0,1 get the value of your handler i.e : ui.values[index] and then use $(this) to get the current span which is iterated and pass this to your position .

Demo Code :

$(document).ready(function() {
  $("#slider").slider({
    range: true,
    min: 89,
    max: 98,
    step: 1,
    values: [89, 98],
    slide: function(event, ui) {
      if ((ui.values[1] - ui.values[0]) < 1) {
        return false;
      }
      var delay = function() {
        //loop through the span...
        $("#slider").find(".ui-slider-handle").each(function(index) {
          var label = index == 0 ? '#min' : '#max'; //change selector
          //assign value
          $(label).html(ui.values[index]).position({
            my: 'center top',
            at: 'center bottom',
            of: $(this), // current span which is iterated..
            offset: "0, 10"
          });
        });

      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });


  $('#min').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(0)'),
    offset: "0, 10"
  });

  $('#max').html($('#slider').slider('values', 1)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider .ui-slider-handle:eq(1)'),
    offset: "0, 10"
  });
})

.ui-slider {
  height: 5px;
  width: 205px;
  position: relative;
  border: none;
  background: #F5A000;
  margin-left: 20px;
  margin: 100px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #3A3A3A;
  /* border-radius: 25px;*/
  outline: none;
  border: 1px solid #3A3A3A;
  position: absolute;
  margin-left: -5px;
  top: -7px;
  width: 4px;
  height: 15px;
  border-radius: 0;
}

.ui-slider-horizontal .ui-slider-range {
  background: #F5A000;
}

#labelHolder {
  height: 7px;
  position: relative;
  border: none;
}

#min,
#max {
  position: absolute;
  margin-left: -.6em;
  text-align: center;
  font-family: Lato, sans serif;
  font-size: 15px;
  font-weight: 600;
  color: #3A3A3A;
}

JQuery UI Range Slider values

1 Answers